vue i18n国际化

1.安装依赖

npm install --save vue-i18n

2.新建目录结构如下图:

3.单页面应用,把language 存入 localstorage中,切换路由 从 localstorage中取值,如果没有 默认 cn.

main.js

import i18n from './i18n/i18n'
new Vue({
  el: '#app',
  router,
  store,
  i18n,
  render: h => h(App)
})

cn.js

import zhLocale from "element-ui/lib/locale/lang/zh-CN";
const cn = {
  message: {
    hello: "你好，世界"
  },
  tableHead: {
    authname: "授权组名称",
    name: "姓名"
  },
  ...zhLocale
};

export default cn;

en.js

import enLocale from "element-ui/lib/locale/lang/en";
const en = {
  message: {
    hello: "hello, world"
  },
  tableHead: {
    authname: "authname",
    name: "name"
  },
  ...enLocale
};

export default en;

index.js

import en from './en'
import cn from './cn'
export default {
  en,
  cn
}

i18n.js

import Vue from "vue";
import locale from "element-ui/lib/locale";
import VueI18n from "vue-i18n";
import messages from "./langs";

Vue.use(VueI18n);
const i18n = new VueI18n({
  locale: localStorage.lang || "cn",
  messages
});
locale.i18n((key, value) => i18n.t(key, value)); //重点：为了实现element插件的多语言切换

export default i18n;

页面:xxx.vue

	<el-table-column
          :label="this.$t('tableHead.authname')"
          prop="auth_group_name"
          sortable>
    </el-table-column>
    <el-button @click="cnChoose">中文</el-button>
    <el-button @click="enChoose">英文</el-button>
    cnChoose() {
      this.$i18n.locale = "cn";
      localStorage.setItem("lang", this.$i18n.locale);
    },
    enChoose() {
      this.$i18n.locale = "en";
      localStorage.setItem("lang", this.$i18n.locale);
    }

效果图: