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')原文地址：https://blog.csdn.net/weixin_45122120/article/details/142361499
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！