vue+element实现语言切换

因项目需要，要加国际化。百度和看element文档。实现如下

1.首先要在项目中安装vue-i18n

yarn add vue-i18n

2.新建一个lang文件，因我的项目要中文，英文，日文。所以在lang文件下分别新建了zh.js，en.js，ja.js。同时在新建index.js

3.在lang下的index.js添加如下内容

locale首先是在缓存里获取的。

import Vue from 'vue';
import VueI18n from 'vue-i18n';
import enLocale from './en';
import zhLocale from './zh';
import jaLocale from './ja';
import elementEnLocale from 'element-ui/lib/locale/lang/en';
import elementzhLocale from 'element-ui/lib/locale/lang/zh-CN';
import elementjaLocale from 'element-ui/lib/locale/lang/ja';
Vue.use(VueI18n)
const i18n = new VueI18n({
  locale: sessionStorage.getItem("lang") || 'zh',// set locale，默认中文
  messages:{
    en:{
      ...enLocale,
      ...elementEnLocale
    },
    zh:{
      ...zhLocale,
      ...elementzhLocale
    },
    ja:{
      ...jaLocale,
      ...elementjaLocale
    }
  }
})
export default i18n;

4.在en.js添加内容如下

export default{
  menu:{
    home:"home",
  },  
  home:{
    hometitle:"Find The Job That Fits Your Life",
    keywords:"keywords",
    location:"location",
    search:"search"
  }
}

5.在zh.js添加内容如下

export default{
  menu:{
    home:"首页"
  },
  home:{
    hometitle:"找一份适合你生活的工作",
    keywords:"关键词",
    location:"位置",
    search:"搜索"
  }
}

6.在ja.js添加内容如下

export default{
  menu:{
    home:"最初のページ"
  },
  home:{
    hometitle:"あなたの人生に合う仕事を見つけてください",
    keywords:"キーワード",
    location:"ロケーション",
    search:"サーチ"
  }
}

7.在项目的入口文件main.js添加如下

import Vue from 'vue'
import App from './App.vue'
import router from "@/router";
import ElementUI from "element-ui";
import i18n from './lang/index';
import "@/assets/style/normalize.css";
import "@/assets/scss/index.scss";
import axios from 'axios'
//全局注册
Vue.prototype.$axios = axios;
//element-ui为了兼容vue-i18n@6.x
Vue.use(ElementUI,{
  i18n:(key,value)=>i18n.t(key,value)
});
Vue.config.productionTip = false

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

最后在需要切换语言的地方内容和事件做切换

<el-dropdown class="international" @command="handleCommand">
      <span class="el-dropdown-link">
        Languages
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item :disabled="language==='zh'" command="zh">中文</el-dropdown-item>
        <el-dropdown-item :disabled="language==='en'" command="en">English</el-dropdown-item>
        <el-dropdown-item :disabled="language==='ja'" command="ja">日本語</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

添加事件如下

data() {
    return {
      language: sessionStorage.getItem("lang")//重缓存中获取语言状态
    };
  },
 methods: {
    // 根据下拉框的中被选中的值切换语言
    handleCommand(value) {
      this.language = value;
      this.$i18n.locale = value;
      window.sessionStorage.setItem("lang", this.language);
    }
}

然后在页面中使用如下：