需要引入?vue-i18n
npm i element-ui -S
npm install vue-i18n
index.html
<link rel="stylesheet" >
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
創(chuàng)建目錄 用于放多語言文件? ?重要部分 index.js 、 i18n.js?
語言文件? CNS.js （中文）? ENS.JS(英文)? ? ?FNS.js(繁體)
CNS.JS (中文)??? 設(shè)置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':'后臺管理系統(tǒng)', // 后臺管理系統(tǒng)
}
ENS.js （英文）
import enLocalefrom 'element-ui/lib/locale/lang/en'?
const ENS = {
? ...enLocale,
Login:{
'title':'Backstage Management', // 后臺管理系統(tǒng) 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', // 設(shè)置語言? //從localStorage中拿到用戶的語言選擇，如果沒有，那默認(rèn)中文。
? messages,
});
locale.i18n((key, value) => i18n.t(key, value)); //為了實現(xiàn)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";? // 多語言設(shè)置
// Vue.use(ElementUI,{locale}); // 設(shè)置組件中的語言為英文? 如果只使用一種可通過這種方式
// axios api
import Apifrom './api/axios';
Vue.prototype.$api = Api;
// echarts
import echartsfrom 'echarts';
Vue.prototype.$echarts = echarts;
// 必須 創(chuàng)建項目后就已存在
Vue.config.productionTip= false;
new Vue({
? el: '#app',
? router,
? store,
? i18n,
? components: { App},
? template: ''
});
longSet.vue (當(dāng)前使用的是組件)? ? 重要代碼? ?this.$i18n.locale = 'CNS';
<template>
<div class="sel-langs">
? <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>
? </el-select>
</div>
</template>
<script>
? ? export default {
? ? ? name: "langsSet",
? ? ? props:['message'],
? ? ? data() {
? ? ? ? return {
? ? ? ? ? lang: 'ENS', // 默認(rèn)選中 英文
? ? ? ? ? langArr: [{value: 'CNS',label: '中文' }, {value: 'ENS', label: 'English' }],
}
},
? ? ? methods: {
? ? ? ? switchLang()? {
? ? ? ? ? this.$emit('listenToChildEvent',this.lang);
? ? ? ? ? this.$i18n.locale = this.lang;
? ? ? ? ? localStorage.setItem('langs',this.lang);
},
? ? ? ? handleReset2() {
? ? ? ? ? this.$refs.ruleForm2.resetFields();
},
},
? ? ? mounted(){
? ? ? ? var langs = localStorage.getItem('langs');
? ? ? ? if(langs !== null){
? ? ? ? ? this.lang = langs;
? ? ? ? }else{ // 設(shè)置初始語言
? ? ? ? ? this.lang = 'CNS';
}
? ? ? ? this.$i18n.locale = this.lang;
},
}
</script>
<style scoped>
? .sel-langs{ width:120px;}
? .sel-langs .el-input--suffix .el-input__inner{border:none !important;}
</style>
頁面引入 demo.vue
<langs-set class="sets" :message="parentMsg" v-on:listenToChildEvent = 'showMsgFromChild'></langs-set>
methods: {
? // 根據(jù)選擇的語言 進行控制左側(cè)菜單
? showMsgFromChild:function(data){
? ? this.initMenuWay(data);
? },
// 左側(cè)菜單使用賦值
initMenuWay(lang){
? if(lang === 'CNS'){
? ? this.menuList =? menudataFN.result; // menu json數(shù)據(jù)獲取
? }else if(lang === 'ENS'){
? ? this.menuList =? menudataEN.result; // menu json數(shù)據(jù)獲取
? }else{
? ? this.menuList =? menuDataCN.result; // menu json數(shù)據(jù)獲取
? }
},
}
