vue3使用vue-i18n实现国际化

Q_Q 忙里偷闲

已于 2024-05-22 16:59:51 修改

阅读量2.8k

点赞数 28

分类专栏： # vue2&vue3 常用示例专栏文章标签： vue.js javascript 前端 vue-i18n 国际化

于 2024-04-01 17:31:52 首次发布

本文链接：https://blog.csdn.net/qq_36410795/article/details/137239189

版权

vue2&vue3 常用示例专栏专栏收录该内容

22 篇文章 1 订阅

订阅专栏

本文详细介绍了如何在Vue3项目中安装并配置vue-i18n，创建多语言文件，注册i18n实例，以及在组件和JavaScript中使用国际化。同时涵盖了如何通过改变locale.value实现语言切换，以及处理ref中国际化值未生效的问题。

摘要由CSDN通过智能技术生成

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