文章目录
1. 安装
vue-i18n
cnpm i --save vue-i18n
2. 创建文件存储翻译的语言
在
src/lang/en.json
中
exportdefault{login:'login'};
在
src/lang/zh.json
中
exportdefault{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')
<divclass="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><viewclass="tab"><viewclass="item":class="{ active: active == 'zh' }"@click="changeActive('zh')">中</view><viewclass="item":class="{ active: active == 'en' }"@click="changeActive('en')">EN</view></view></template><scriptsetuplang="ts">import{ localStorage }from"@/utils/local-storage";import{ useI18n }from"vue-i18n";const{ locale }=useI18n();const active =ref(locale.value || localStorage.get("lang"));constchangeActive=lang=>{
locale.value = lang;
active.value = lang;
localStorage.set("lang", lang);};</script><stylescopedlang="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"),},];});
版权归原作者 范特西是只猫 所有, 如有侵权,请联系我们删除。