vue3安装i18n

### 安装和配置 Vue I18n

为了在 Vue 3 项目中集成国际化支持 (i18n)，可以按照以下方式操作：

#### 创建并初始化新项目
如果尚未创建项目，则可以通过 Vite 或者其他工具来快速搭建一个新的 Vue 3 应用程序。对于已经存在的项目，可以直接跳过这一步。

npm init vite@latest my-vue-i18n-app --template vue-ts
cd my-vue-i18n-app
npm install

#### 安装 `vue-i18n` 插件
通过 npm 来安装官方推荐的 `vue-i18n` 版本以适应 Vue 3 的特性[^4]。

npm install @intlify/vite-plugin-vue-i18n @vueuse/i18n vue-i18n

#### 设置插件选项
编辑项目的根目录下的 `vite.config.ts` 文件，加入 `@intlify/vite-plugin-vue-i18n` 插件以便更好地处理多语言资源文件。

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueI18n from '@intlify/vite-plugin-vue-i18n'

export default defineConfig({
  plugins: [
    vue(),
    vueI18n({
      include: path.resolve(__dirname, './src/locales/**'),
    })
  ]
})

#### 配置全局注册
打开 `main.ts` 文件，在其中导入必要的模块并将 i18n 实例挂载到应用实例上。

import { createApp } from 'vue'
import App from './App.vue'
// 导入 i18n 和相关设置
import { createI18n } from 'vue-i18n'
import messages from './locales/messages' 

const app = createApp(App)

const i18n = createI18n({
  locale: 'en', // 默认语言
  fallbackLocale: 'zh',
  messages,
})

app.use(i18n).mount('#app')

#### 准备本地化消息
在 `./src/locales` 下建立相应的 JSON 文件用于存储不同语言的消息字符串。例如:

- `messages.en.json`: 英语版本的信息。
- `messages.zh.json`: 中文版本的信息。

这些文件应该包含键值对形式的数据结构，用来表示各个组件中的文字内容。

{
  "message": {
    "hello": "Hello world!"
  }
}

#### 使用翻译功能
最后可以在模板里利用 `$t()` 方法获取对应的翻译文本[^3]。

<template>
  <div id="app">
    <!-- 调用 $t() 进行翻译 -->
    <p>{{ $t('message.hello') }}</p>
    
    <!-- 动态切换当前使用的语言环境 -->
    <button @click="$i18n.locale='en'">English</button>
    <button @click="$i18n.locale='zh'">中文</button>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>