首页vue3使用vue-i18n js

vue3使用vue-i18n js

时间: 2025-01-17 10:55:07 浏览: 64

### 如何在 Vue 3 项目中使用 `vue-i18n` 进行国际化 #### 安装依赖库为了实现国际化的功能，在 Vue 3 中可以安装并配置 `vue-i18n` 库。通过 npm 或者 yarn 来安装该插件： ```bash npm install vue-i18n@next ``` 或者 ```bash yarn add vue-i18n@next ``` #### 创建语言包文件夹创建一个名为 `locales` 的目录用于存储不同语言的消息文件，例如英语 (`en.js`) 和中文 (`zh.js`)。对于英文消息文件 `src/locales/en.js`: ```javascript export default { message: { hello: 'hello world' } } ``` 对于中文消息文件 `src/locales/zh.js`: ```javascript export default { message: { hello: '你好，世界' } } ``` #### 初始化 i18n 实例编辑项目的入口文件 `main.js` 并初始化 `vue-i18n` 插件实例，加载所需的语言资源，并将其挂载到全局 Vue 实例上[^1]: ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 导入i18n相关模块以及语言包 import { createI18n } from 'vue-i18n'; import enLocale from './locales/en'; import zhLocale from './locales/zh'; const messages = { en: enLocale, zh: zhLocale }; const i18n = createI18n({ locale: 'zh', // 设置默认语言为中文 fallbackLocale: 'en', messages }); createApp(App).use(i18n).mount('#app'); ``` #### 使用翻译函数可以在模板内直接调用 `$t()` 方法来获取对应语言环境下的字符串 : ```html <template> <div id="app"> {{ $t('message.hello') }} </div> </template> <script setup> // script content here... </script> ``` 这样就可以根据当前用户的偏好自动切换显示不同的文字内容了。

阅读全文