vue 多语言设置 + element ui 多语言设置

需要引入 vue-i18n

npm i element-ui -S

npm install vue-i18n

index.html

创建目录 用于放多语言文件   重要部分 index.js 、 i18n.js 

语言文件  CNS.js （中文）  ENS.JS(英文)     FNS.js(繁体)

CNS.JS (中文)    设置element ui 中文 引入 import zhLocalefrom 'element-ui/lib/locale/lang/zh-CN'   ...zhLocale

import zhLocalefrom 'element-ui/lib/locale/lang/zh-CN' 

// 用于存放 语言字段

const CNS = {

 ...zhLocale ,

// 登录页面

Login:{

'title':'后台管理系统', // 后台管理系统

}

ENS.js （英文）

import enLocalefrom 'element-ui/lib/locale/lang/en' 

const ENS = {

  ...enLocale,

Login:{

'title':'Backstage Management', // 后台管理系统 System

}

index.js

import ENS from './ENS';

import CNS from './CNS';

export default {

  ENS: ENS,

  CNS: CNS,

}

i18n.js

import Vuefrom 'vue'

import localefrom 'element-ui/lib/locale';

import VueI18n from 'vue-i18n'

import messages from './langs'

Vue.use(VueI18n);

const i18n = new VueI18n({

  locale: localStorage.lang || 'CNS', // 设置语言  //从localStorage中拿到用户的语言选择，如果没有，那默认中文。

  messages,

});

locale.i18n((key, value) => i18n.t(key, value)); //为了实现element插件的多语言切换

export default i18n

main.js

import Vuefrom 'vue'

import Appfrom './App'

// 路由

import routerfrom './router'

// 引入下载颜色主题

import storefrom '@/store/index'

// 多语言切换

import i18n from './i18n/i18n';

// 引入elementUI

import Elementfrom 'element-ui'

Vue.use(Element);

// import {locale} from "element-ui/lib/locale/lang/en";  // 多语言设置

// Vue.use(ElementUI,{locale}); // 设置组件中的语言为英文  如果只使用一种可通过这种方式

// axios api

import Apifrom './api/axios';

Vue.prototype.$api = Api;

// echarts

import echartsfrom 'echarts';

Vue.prototype.$echarts = echarts;

// 必须 创建项目后就已存在

Vue.config.productionTip= false;

new Vue({

  el: '#app',

  router,

  store,

  i18n,

  components: { App},

  template: ''

});

longSet.vue (当前使用的是组件)    重要代码   this.$i18n.locale = 'CNS';

页面引入 demo.vue

methods: {

  // 根据选择的语言 进行控制左侧菜单

  showMsgFromChild:function(data){

    this.initMenuWay(data);

  },

// 左侧菜单使用赋值

initMenuWay(lang){

  if(lang === 'CNS'){

    this.menuList =  menudataFN.result; // menu json数据获取

  }else if(lang === 'ENS'){

    this.menuList =  menudataEN.result; // menu json数据获取

  }else{

    this.menuList =  menuDataCN.result; // menu json数据获取

  }

},

}