Vuetify+Nuxt3的i18n配置

## 简介

使用 `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`等。

<!-- more -->

## 特殊依赖包说明

### @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` 文件中增加即可。