vue3项目i18n

### Vue3 项目中配置和使用 i18n 国际化的详细说明 #### 一、安装依赖 在 Vue3 项目中实现国际化功能，首先需要安装 `vue-i18n` 插件。可以通过 npm 或 yarn 安装： ```bash npm install vue-i18n@next --save ``` 或者 ```bash yarn add vue-i18n@next ``` --- #### 二、创建语言包 为了支持多种语言，在项目的 `src` 目录下新建一个名为 `locales` 的文件夹，并在其内部分别创建不同语言的语言包文件。 例如： - 创建 `zh-cn.ts` 文件用于存储中文翻译内容。 - 创建 `en.ts` 文件用于存储英文翻译内容。 以下是两个示例语言包的内容： **`zh-cn.ts`:** ```typescript export default { message: { hello: '你好，世界', welcome: '欢迎来到我们的网站' } }; ``` **`en.ts`:** ```typescript export default { message: { hello: 'Hello World', welcome: 'Welcome to our website' } }; ``` --- #### 三、初始化 i18n 实例 在 `src` 同级目录下创建一个 `i18n.ts` 文件（也可以命名为其他名称），用来初始化 `vue-i18n` 实例。 以下是一个完整的 `i18n.ts` 配置示例[^1]: ```typescript import { createI18n } from 'vue-i18n'; import zhCN from './locales/zh-cn'; import enUS from './locales/en'; const i18n = createI18n({ locale: 'en', // 默认语言环境 fallbackLocale: 'en', // 当未匹配到指定语言时使用的回退语言 globalInjection: true, // 是否启用全局注入 `$t`, 若为 false 则需手动引入 useI18n() messages: { 'zh-cn': zhCN, en: enUS } }); export default i18n; ``` --- #### 四、注册 i18n 至应用 在项目的入口文件 `main.ts` 中，将 `i18n` 注册至 Vue 应用实例中[^3]。 ```typescript import { createApp } from 'vue'; import App from './App.vue'; import i18n from './i18n'; // 引入刚刚创建的 i18n 实例 const app = createApp(App); app.use(i18n); app.mount('#app'); ``` --- #### 五、组件中的使用方式 ##### 1. 使用模板语法 可以直接通过插值表达式调用 `$t()` 方法来获取对应语言的翻译内容[^2]。 ```html <template> <div> <h1>{{ $t('message.hello') }}</h1> <!-- 动态显示当前语言下的 "hello" --> <p>{{ $t('message.welcome') }}</p> <!-- 显示对应的 "welcome" 文本 --> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; export default defineComponent({ name: 'HomeView' }); </script> ``` ##### 2. 组件脚本中使用 `useI18n()` 如果希望更灵活地操作国际化逻辑，可以借助组合式 API 提供的 `useI18n()` 函数[^4]。 ```typescript <template> <div> <el-button :text="t('message.username')">按钮</el-button> </div> </template> <script setup lang="ts"> import { useI18n } from 'vue-i18n'; const { t } = useI18n(); </script> ``` --- #### 六、切换语言 可以在运行时动态更改语言环境。例如，提供一个方法让用户选择不同的语言。 ```typescript function changeLanguage(lang: string): void { i18n.global.locale.value = lang; // 修改全局语言环境 } ``` 在实际开发中，通常会结合 Vuex 或 Pinia 来管理用户的偏好设置，从而持久化保存所选语言。 --- ### 总结 以上展示了如何在 Vue3 项目中完成国际化的配置与使用过程。具体包括安装依赖、创建语言包、初始化 i18n 实例以及将其集成到应用程序中。同时提供了两种常见的使用场景——模板语法和组合式 API 调用。