Vue-i18n国际化多语言配置

Vue- i18n 国际化多语言配置

Vue-i18n官网：https://kazupon.github.io/vue-i18n/
Vue-i18n github： https://github.com/kazupon/vue-i18n

1、vue2项目中安装 vue-i18n 插件

npm install vue-i18n --save

2、 配置多语言文件引入

在src文件夹下创建 lang 文件夹，lang 文件夹下创建 index.js 、zh.js、en.js文件。

--src
   ｜_ lang
   		｜- index.js
   		 | - zh.js
   		 | _ en.js

en.js 文件，导出配置的英文多语言包

export default {
  home: {
    label1: "English",
  },
};

zh.js 文件，导出配置的中文多语言包

export default {
  home: {
    label1: "中文",
  },
};

index.js 文件，多语言入口文件配置

import VueI18n from "vue-i18n";
import Vue from "vue";

Vue.use(VueI18n);

//引入element的语言
import localeLib from "element-ui/lib/locale"; //本地

//  引入需要的语言包
import en from "@/lang/en.js";
import zh from "@/lang/zh.js";

// 本地语言环境获取
const lang = localStorage.getItem("language") || navigator.language || "zh";

const i18n = new VueI18n({
  locale: lang, // 语言标识
  fallbackLocale: "zh-CN", // 失败时默认语言
  silentTranslationWarn: true, // 设置为true 会屏蔽翻译在控制台报出的警告
  messages: {
    en: en,
    "zh-CN": zh,
  },
});

// 设置语言
localeLib.i18n((key: string, value: any) => i18n.t(key, value));

export default i18n;

3、在项目的入口文件main.js中引入配置的多语言

main.js 中引入多语言后，vue组件中使用就不需要再额外引入了，已经挂载到 this 上了。

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";

import i18n from "@/lang"; 

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  i18n,
  render: (h) => h(App),
}).$mount("#app");

4、 配置多语言包

后续，根据业务需要，只需要更改zh.js、en.js配置多语言包即可。
en.js

export default {
  home: {
    label1: "English",
    label2: "Home Page Title",
  },
};

zh.js

export default {
  home: {
    label1: "中文",
    label2: "首页标题",
  },
};

5、使用

vue组件的标签中

<p> {{ $t("home.label2")}} </p>

vue组件的js中

let str = this.$t("home.label2");

单独js文件中

单独的js文件中，需要引入多语言才能使用

import i18n from "@/lang";

let str = i18n.t("home.label2");