0


vue3使用vue-i18n实现国际化

文章目录

请添加图片描述

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"),},];});

本文转载自: https://blog.csdn.net/qq_36410795/article/details/137239189
版权归原作者 范特西是只猫 所有, 如有侵权,请联系我们删除。

“vue3使用vue-i18n实现国际化”的评论:

还没有评论