vue项目多语言配置

news/2024/10/21 3:31:59/

1. 安装 Vue I18n：首先安装 Vue I18n 库，我这里使用 npm 进行安装：

npm install vue-i18n

2. 创建语言文件：在你的项目中创建一个文件夹用于存放多语言文件，例如 `locales`，然后在这个文件夹中创建每种语言的 JSON 文件。例如，你可以创建 `zh-CN.json` 和 `en-US.json` 来分别存放中文和英文的翻译内容。

// zh-CN.json
{"hello": "你好"
}

// en-US.json
{"hello": "Hello"
}

3. 配置 Vue I18n：在 Vue 项目的入口文件中配置 Vue I18n，并设置默认语言和加载语言文件的路径。

javascript">// main.js
import { createApp } from 'vue'
import App from './App.vue'
import { createI18n } from 'vue-i18n'// 使用动态 import 加载语言文件
Promise.all([import('./locales/zh-CN.json'),import('./locales/en-US.json')
]).then(([zhCN, enUS]) => {const i18n = createI18n({legacy: false,locale: 'zh-CN', // 设置默认语言messages: {'zh-CN': zhCN.default, // 注意这里需要使用 .default 获取模块的默认导出'en-US': enUS.default}})app.use(i18n)
})
const app = createApp(App)
app.mount('#app')

这里为什么使用 Promise 导入语言文件？

在 Vue I18n 中，messages 选项应该是一个对象，直接使用 import 导入语言文件，这会返回一个 Promise 而不是语言数据对象。
为了解决这个问题，在加载语言文件时使用动态 import，然后在 then 回调中设置 messages 对象。另外，createI18n 方法不支持异步传递 messages，所以需要在创建 i18n 实例之后手动设置语言数据。

5. 在组件中使用多语言：在你的 Vue 组件中通过 `$t` 方法来使用多语言翻译。

<template><div>{{ $t('hello') }}</div>
</template>

$t 方法会根据当前语言选择对应的翻译内容。

这里要是在组件中使用，举个栗子：(usernamePlaceholder)

<template><Field v-model="username" name="username" label="" :placeholder="usernamePlaceholder":rules="[{ required: true, message: $t('hello') }]" />
</template>

<script setup>javascript"> 
// 使用国际化函数  
const { t } = useI18n();  
const usernamePlaceholder = t('hello');  
</script>

6. 切换语言：你可以在你的应用程序中添加一个切换语言的功能，例如在设置页面中，通过修改 Vue I18n 实例的 `locale` 属性来切换语言。

javascript">import { ref, watch } from 'vue';const { t,locale } = useI18n();
//如果是在页面上这样写  $t('hello')  的，changeLanguage 方法执行后语言就切换了
const changeLanguage=(value)=>{locale.value = value;
}//像 usernamePlaceholder 这样定义的变量，要切换多语言，需要 watch 监听
let usernamePlaceholder = t('hello');
//这里监听多语言切换
watch(locale, (newVal, oldVal) => {if (newVal !== oldVal) {usernamePlaceholder = t('hello');}
});