i18n

需要引入 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: ‘’

});

作者：丶温瞳
链接：https://www.jianshu.com/p/66fbe08ebac4
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。longSet.vue (当前使用的是组件) 重要代码 this.$i18n.locale = ‘CNS’;

<el-select v-model=“lang” placeholder=“请选择” size=“mini” @change = ‘switchLang’>

<el-option v-for="iteminlangArr" :key="item.value" :label="item.label"  :value="item.value">

</el-option>

页面引入 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数据获取

}

},

}