vue3使用vue-i18n实现国际化

文章目录

• 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')

<div class="title">   {{ $t('login') }} </div> 

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;

<template>   <view class="tab">     <view       class="item"       :class="{ active: active == 'zh' }"       @click="changeActive('zh')"       >中</view     >     <view       class="item"       :class="{ active: active == 'en' }"       @click="changeActive('en')"       >EN</view     >   </view> </template> <script setup lang="ts"> import { localStorage } from "@/utils/local-storage"; import { useI18n } from "vue-i18n"; const { locale } = useI18n(); const active = ref(locale.value || localStorage.get("lang")); const changeActive = lang => {   locale.value = lang;   active.value = lang;   localStorage.set("lang", lang); }; </script> <style scoped lang="scss"> .tab {   height: 100%;   margin: auto;   display: flex;   align-items: center;   justify-content: center;   position: relative;   overflow: hidden;   border-radius: 4px;   background: rgba(37, 44, 66);   padding: 3px;   .item {     text-align: center;     padding: 0px 15px;     height: 100%;     position: relative;     border-radius: 4px;     color: #fff;     font-size: 14px;   }   .active {     background: #f0b90b;     color: #fff;   } } </style>  

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

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

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

需要使用 computed 处理即可

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