vue-i18n

时间: 2025-04-21 16:41:53 AIGC 浏览: 56

### Vue-i18n 国际化配置和使用 #### 安装 vue-i18n 插件为了实现国际化支持，在项目中安装 `vue-i18n` 是必要的。可以通过 npm 或 yarn 来完成这一步骤。 ```bash npm install vue-i18n@next --save ``` 或者 ```bash yarn add vue-i18n@next ``` #### 初始化 i18n 实例并引入到应用中创建一个新的文件用于初始化 `i18n` 对象，并将其挂载至 Vue 应用实例上，以便在整个应用程序内访问[^1]。 ```javascript // src/i18n.js import { createI18n } from 'vue-i18n'; const messages = { en: { message: { hello: 'hello world' } }, zh: { message: { hello: '你好，世界' } } }; export const i18n = createI18n({ locale: 'en', // 设置默认语言环境 fallbackLocale: 'zh', messages, // 注册消息对象 }); ``` 接着修改入口文件来加载刚刚定义好的 `i18n`： ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import { i18n } from './i18n'; createApp(App).use(i18n).mount('#app'); ``` #### 使用 `$t()` 方法获取翻译后的字符串在组件模板里可以直接调用 `$t('message.hello')` 获取对应的语言包中的值。 ```html <template> <div id="app"> {{ $t('message.hello') }} </div> </template> <script setup lang="ts"></script> ``` 对于已有的大型项目来说确实会增加不少工作量，因为需要逐一手动为所有待国际化的文本添加键名映射关系。不过这样做可以确保灵活性以及后期维护方便性。

阅读全文