文章目录

• 1. 安装 `vue-i18n`
• 2. 创建文件存储翻译的语言
• 3. 注册i18n实例
• 4. 在main.ts中引入vue-i18n实例
• 5. 在组件模板中使用
• 6. 在js中使用
• 7. locale.value 实现国际化语言切换
• 8. vue3 中ref里面的国际化值没生效问题

1. 安装 vue-i18n

cnpm i --save vue-i18n 

2. 创建文件存储翻译的语言

在 src/lang/en.json 中

export default {   login: 'login' }; 

在 src/lang/zh.json 中

export default {   login: '登录' }; 

3. 注册i18n实例

在 src/lang/index.ts 中

import { createI18n } from "vue-i18n"; import zh from "./zh.json"; import en from "./en.json"; import vantZhCN from 'vant/lib/locale/lang/zh-CN';//vant组件库的国际化中文 import vantEnUS from 'vant/lib/locale/lang/en-US';//vant组件库的国际化英文 import { localStorage } from "@/utils/local-storage";  const i18n: any = createI18n({   locale: localStorage.get("lang") || "zh",   legacy: false,   globalInjection: true,   messages: {     zh: {       ...zh,       ...vantZhCN     },     en: {       ...en,       ...vantEnUS     },   } }); export { i18n };  

4. 在main.ts中引入vue-i18n实例

在 src/main.ts 中

import { i18n } from '@/lang/index'; app.use(i18n).mount("#app"); 

5. 在组件模板中使用

直接使用 $t('login')

   {{ $t('login') }} 
 

6. 在js中使用

需要导入 i18n 在使用 i18n.global.t('login')

import { i18n } from '@/lang/index'; showDialog({      confirmButtonText: i18n.global.t('confirm'),      message: i18n.global.t('pleaseWalletBrowser'),  }).then(() => {  }); 

7. locale.value 实现国际化语言切换

核心代码：
import { useI18n } from “vue-i18n”;
const { locale } = useI18n();
locale.value = lang;

8. vue3 中ref里面的国际化值没生效问题

如在ts中使用 ref声明 的默认文字国际化，当我们切换国际化的时候发现并不能生效

const menuList = ref([   {     key: 1,     menuName: t("menu1"),   } ]); 

需要使用 computed 处理即可

const menuList = computed(() => {   return [     {       key: 1,       menuName: t("menu1"),     },   ]; });