vue使用vue-i18n实现国际化

我使用的是vue2.6版本，具体使用其他版本可以进行修改

一、安装

npm install vue-i18n -D

二、配置

1、文件配置

①在src下创建 i18n 目录

②在 i18n 目录下创建 langs 文件夹 和 index.js文件，具体如下

2、index.js代码如下，这里使用了较多语言，具体按项目定

import Vue from "vue";
import VueI18n from "vue-i18n";
//引入自定义语言配置
import de from "./langs/de";
import en from "./langs/en";
import es from "./langs/es";
import fr from "./langs/fr";
import jp from "./langs/jp";
import ko from "./langs/ko";
import th from "./langs/th";
import tw from "./langs/tw";
import vi from "./langs/vi";
import zh from "./langs/zh";
Vue.use(VueI18n); // 全局注册国际化包
// 准备翻译的语言环境信息
const i18n = new VueI18n({locale: localStorage.getItem("lang") || "zh", //将语言标识存入localStorage或sessionStorage中，首次默认中文显示，非首次则以localStorage为准messages: {de,en,es,fr,jp,ko,th,tw,vi,zh},silentTranslationWarn: true, //解决vue-i18n黄色警告"value of key 'xxx' is not a string"和"cannot translate the value of keypath 'xxx'.use the value of keypath as default",可忽略globalInjection: true, // 全局注入fallbackLocale: "zh", // 指定的locale没有找到对应的资源或当前语种不存在时，默认设置当前语种为中文
});
const temLang = localStorage.getItem("lang");
if (!temLang) {localStorage.setItem('lang', 'zh')
}
export default i18n;

3、zh.js文件实例，其他语言文件按这格式不变

// 中文
export default {loginTitle: "账号登入",registerTitle: "账号注册",loginTip: "欢迎回来！使用您的电子邮箱或手机号登入",registerTip: "使用您的电子邮箱或手机号进行注册",userNamePlc: "请输入账号",userPassPlc: "请输入密码",login: "登入",register: "注册",overtime: "登录超时，请重新登录",loginSuccess: "登入成功",registerSuccess: "注册成功",userNameTip: "请输入账号",userPassTip: "请输入密码",userOldPassTip: "请输入旧密码",userNewPassTip: "请输入新密码",userPassAgainTip: "请再次输入新密码",errorPassTip: "两次密码不一致",userPassSureTip: "请再次输入密码",jumpPageText: "当前页面需要登录查看，请登录",
};

4、为了方便使用，添加了个hooks文件，可以在vue页面引用此文件获取当前语言

// 语言配置
import { ref, computed, getCurrentInstance } from "vue";export function useLang() {const vm = getCurrentInstance();const lang = ref(localStorage.getItem("lang") || "zh");const langList = ref([{label: "English",src: require("../assets/images/lang/en.png"),value: "en",},{label: "简体中文",src: require("../assets/images/lang/zh.png"),value: "zh",},{label: "繁體中文",src: require("../assets/images/lang/tw.png"),value: "tw",},{label: "ไทย",src: require("../assets/images/lang/th.png"),value: "th",},{label: "日本語",src: require("../assets/images/lang/jp.png"),value: "jp",},{label: "Español",src: require("../assets/images/lang/es.png"),value: "es",},{label: "Français",src: require("../assets/images/lang/fr.png"),value: "fr",},{label: "Deutsch",src: require("../assets/images/lang/de.png"),value: "de",},{label: "한국어",src: require("../assets/images/lang/ko.svg"),value: "ko",},{label: "Tiếng Việt",src: require("../assets/images/lang/vi.svg"),value: "vi",},]);// 获取当前语言对象const getLangObject = computed(() => {return langList.value.find((item) => item.value === lang.value);});// 设置语言const setLan = (val) => {localStorage.setItem("lang", val);lang.value = val;vm.proxy.$i18n.locale = val; //切换为英文// location.reload();};return { lang, setLan, langList, getLangObject };
}

 5、main.js配置

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import App from "./App.vue";
import router from "./router";
import store from "@/store/index";
import i18n from "./i18n";
import "./permission";
Vue.use(ElementUI);
Vue.use({i18n: (key, value) => i18n.t(key, value),
});
Vue.config.productionTip = false;
new Vue({router,store,i18n,render: (h) => h(App),
}).$mount("#app");

三、使用

1、template模板使用

<template>{{ $t("loginTitle") }}
</template>

2、setup中使用，这里使用的vue2.6，和其他会有些差别

import { getCurrentInstance } from "vue";
const vm = getCurrentInstance();console.log(vm.proxy.$t("loginTitle"))

 3、js文件中使用

import i18n from "./i18n";i18n.t('loginTitle')