简介

使用 Vuetify 和 Nuxt3 搭建系统时，I18N 需要做一些特殊配置，本文就来记录一下。

本文记录时使用的各个包版本：

json
{
  "dependencies": {
    "@nuxtjs/i18n": "^8.3.1",
    "@nuxtjs/tailwindcss": "^6.12.1",
    "echarts": "^5.5.1",
    "nuxt": "^3.12.4",
    "vue": "latest",
    "vuetify-nuxt-module": "^0.18.2"
  },
  "devDependencies": {
    "i": "^0.3.7",
    "pnpm": "^9.7.0",
    "vite-plugin-vuetify": "^2.0.4"
  }
}

总的来说，实现 Nuxt 中的 Vuetify 国际化 I18N 配置分三步:

1. 安装依赖，重点依赖：@nuxtjs/i18n、vuetify-nuxt-module；
2. 设置Nuxt 的 i18n配置，重要文件：nuxt.config.ts、i18n.config.ts；
3. 客制化 i18n，并引用 Vuetify 提供的 I18N 文件，如：zhHans、en等。

特殊依赖包说明

@nuxtjs/i18n

@nuxtjs/i18n 是 Nuxt 提供的 I18N 管理包，参考：https://nuxt.com/modules/i18n

vuetify-nuxt-module

vuetify-nuxt-module 是 Vuefity 官方针对 Nuxt 定制的依赖包，旨在使用 Nuxt 快速集成 Vuetify。

vite-plugin-vuetify

暂时忘了这个是啥玩意，想起来再补吧~

nuxt.config.ts

注意 i18n 配置项，如下：

ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  modules: ["@nuxtjs/i18n", "vuetify-nuxt-module"],
  i18n: {
    // strategy: "prefix_except_default",
    vueI18n: "./i18n.config.ts",
  },
});

i18n.config.ts

在项目根目录创建 i18n.config.ts 文件，填入以下内容

ts
import en from "./locales/en";
import zh from "./locales/zh";

// You can use `defineI18nConfig` to get type inferences for options to pass to vue-i18n.
export default defineI18nConfig(() => {
  return {
    legacy: false,
    locale: "zh", // 默认语言环境
    messages: {
      en,
      zh,
    },
  };
});

locales

创建 locales 文件夹，在内部分别创建 zh、en 两个文件夹，内容如下

zh

• index.ts

ts
import { zhHans } from "vuetify/locale"; // 引用vuetify的国际化文件
import zh from "./zh.json";

const messages = {
  ...zh,
  $vuetify: zhHans,
};
export default messages;

• zh.json

json
{
  "title": "标题",
  "hello": "欢迎",
  "menu": {
    "menu1": "菜单1",
    "menu2": "菜单2",
    "menu3": "菜单3",
    "menu4": "菜单4"
  }
}

en

• index.ts

ts
import { en as English } from "vuetify/locale"; // 引用vuetify的国际化文件
import en from "./en.json";

const messages = {
  ...en,
  $vuetify: English,
};
export default messages;

• zh.json

json
{
  "title": "TITLE",
  "hello": "Welcome",
  "menu": {
    "menu1": "menu1",
    "menu2": "menu2",
    "menu3": "menu3",
    "menu4": "menu4"
  }
}

完成

经过如上配置，你就已经实现了 Vuetify 组件在 Nuxt 项目环境中的国际化适配，之后想要自己实现国际化内容，在对应的 json 文件中增加即可。