Vue 添加国际化

1. 下载依赖

vue-i18n 与 vue 的版本

vue-i18n	vue
8.x.x	2.x.x
9.x.x	3.x.x

npm i vue-i18n -S

2. 国际化文件

i18n/index.js 文件, 是配置国际化的主文件.

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

Vue.use(VueI18n);

// 创建vue-i18n实例i18n
const i18n = new VueI18n({
  // 设置默认语言
  locale: localStorage.getItem("i18n_local") || "zh",
  // 添加多语言（每一个语言标示对应一个语言文件）
  messages: {
    zh: require("./lang/zh"),
    en: require("./lang/en"),
    mo: require("./lang/mo")
  }
});

// 暴露 i18n
export default i18n;

语言文件

zh.js

// noinspection JSUnusedGlobalSymbols
/**
 * 汉语
 */


export const lang = {
  common: {
    username: "用户名",
    password: "密码"
  }
};

en.js

// noinspection JSUnusedGlobalSymbols
/**
 * 英语
 */


export const lang = {
  common: {
    username: "Username",
    password: "Password"
  }
};

国际化添加到入口文件中

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from "vue";
import App from "./App";
import router from "./router";

import i18n from "./i18n";

Vue.config.productionTip = false;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  i18n,
  router,
  components: { App },
  template: "<App/>"
});

3. 使用

切换语言

	// 国际化, key 为 zh en 等等
	this.$i18n.locale = key;
	// 存入本地
	localStorage.setItem("i18n_locale", key);

赋值

let username = this.$t('lang.common.username');