1、安装
npm install vue-i18n --save
2、创建存放语言包和i18n入口文件
a、在src下创建i18n目录
b、在src/i18n/创建i18n.js （入口）
c、在src/i18n/创建langs目录存放语言包
d、在src/i18n/langs/创建en.js(英文) 和 zh.js(中文)两个文件
i18n.js
i18n.js
import Vue from 'vue'
import locale from 'element-ui/lib/locale';
import VueI18n from 'vue-i18n'
//import messages from './langs' //自定义中英文包
import zh from './langs/zh'
import en from './langs/en' //element 中英文包
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
Vue.use(VueI18n) const messages = {
en: Object.assign(en, enLocale),
zh: Object.assign(zh, zhLocale)
}
//从localStorage中拿到用户的语言选择，如果没有，那默认中文。
/*const i18n = new VueI18n({
locale: localStorage.lang || 'zh',
messages,
})*/
const i18n = new VueI18n({
locale: localStorage.getItem('locale') || 'en',
messages
})
locale.i18n((key, value) => i18n.t(key, value)) //为了实现element插件的多语言切换
console.log('%c当前缓存语言是：'+(localStorage.getItem('locale')=='en'?'English':'中文')+'','color:#fff;background:green;padding:4px;border-radius:5px');
export default i18n
en.js
import enLocale from 'element-ui/lib/locale/lang/en'
const en = {
//所有侧导航的name
slideBar:{
overall:'Overview',
servicevolume:'Service Volume',
visitvolume:'Visit Volume',
users:'User Volume',
multimediausage:'Multimedia Volume',
servicefficiency:'Service Efficiency',
solvedstatus:'Helpful Rate',
transferredrate:'Transfer Rate',
cast:'CSAT',
kgperformance:'KG Performance',
question:'Questions',
outofscopeanalysis:'Question Distribution',
sessionflow:'Session Flow',
handingtime:'Handling Time',
handingturns:'Handling Turns',
leavingstatus:'Leaving Status',
customerjourney:'Customer Journey',
download:"DownLoad"
}, //所有的筛选器name
select:{
country:'Country',
datarange:'Date Range',
timeUnit:'Time Unit',
channel:"Channel",
kgLevel:"KG Level",
domain:"Domain",
intent:"Intent",
slot:"Order"
}, //页面中图表指标 的name
indicatorBar:{
totalVisits:"Total Visits",
totalUsers:"Total Users",
helpfulRate:"Helpful Rate",
transferRate:"Transfer Rate",
CSATRate:"CSAT",
newUsers:"New Users",
repeatUser:"Repeat Users",
solvedCases:"Helpful Cases",
solvedRate:"Helpful Rate",
transferredCases:"Transfer Cases",
trnasferredRate:"Transfer Rate"
}, //页面中tab选项卡name
Tab:{
totalVolume:"Total Volume",
channel:"Channel Comparison",
user:"User Distribution",
userVolume:"User Volume Trend",
repeatUser:"Repeat User Distribution",
solvedRate:"Helpful Rate",
solvedUnsolvedQuestions:"Solved/Unsolved Questions",
transfered:"Transfer Rate",
transferedQuestion:'Transfer/Not Transfer Questions'
},
//下载页
download:{
tab:{
tabOne:"ChatLog Data",
tabTwo:"Visit Data",
tabThree:"User Data"
},
ele:{
datapickerName:"Period",
selectName:"Visit Access Channel",
until:"until"
},
btn:{
download:"DownLoad"
}
}, //element 组件
element:{
loadingText:"Loading..."
}, //时间单位（备用）
dateLabel:{
years:"years",
month:"month",
week:"week",
day:"day"
}
}
export default en;
英文语言包
zh.js
const cn = {
//所有侧导航的name
slideBar: {
overall: '整体概览',
servicevolume: '服务数量',
visitvolume: '访问量',
users: '用户量',
multimediausage: '输入类型',
servicefficiency: '服务效果',
solvedstatus: '解决情况',
transferredrate: '转人工表现',
cast: '用户满意度',
kgperformance: '知识表现',
question: '问题分布',
outofscopeanalysis: '对话流程',
sessionflow: '对话流程',
handingtime: '解决时长',
handingturns: '解决轮数',
leavingstatus: '结束离开状态',
customerjourney: '用户路径',
download:"下载"
},
//所有的筛选器name
select: {
country: '国家',
datarange: '时间区间',
timeUnit: '时间单位',
channel: "渠道",
kgLevel: "知识层级",
domain: "域",
intent: "意图",
slot:"排序"
},
//页面中图表指标 的name
indicatorBar: {
totalVisits: "访问总量",
totalUsers: "用户总量",
helpfulRate: "解决率",
transferRate: "转人工率",
CSATRate: "用户满意度",
newUsers: "新用户",
repeatUser: "重复访问用户",
solvedCases: "解决数量",
solvedRate: "解决率",
transferredCases: "转人工数量",
trnasferredRate: "转人工率"
},
//页面中tab选项卡name
Tab: {
totalVolume: "访问总量",
channel: "访问渠道对比",
user: "用户国家分布",
userVolume: "用户访问趋势",
repeatUser: "重复用户分布",
solvedRate: "解决率",
solvedUnsolvedQuestions: "解决/未解决的问题分布",
transfered: "转人工率",
transferedQuestion:'转人工/未转人工的问题分布'
},
//下载页
download:{
tab:{
tabOne:"日志下载",
tabTwo:"访问数据下载",
tabThree:"用户数据下载"
},
ele:{
datapickerName:"时间区间",
selectName:"访问渠道",
until:"至"
},
btn:{
download:"下载"
}
},
//element 组件
element:{
loadingText:"拼命加载中..."
},
//时间单位（备用）
dateLabel:{
years:"年",
month:"月",
week:"周",
day:"日"
}
}
export default cn;
中文语言包
3、main.js中引用src/i18n/i18n.js入口文件
//引入vue 和 router模块
import Vue from 'vue'
import App from './App'
import router from './router'
//引入element-ui
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css' import i18n from './i18n/i18n' Vue.use(ElementUI)
Vue.config.productionTip = false let gvm = new Vue({
el: '#app',
router,
i18n,
components: { App },
template: '<App/>'
})
main.js
4、找一个vue文件（header.vue）
a、创建模板--> 下拉组件，有中英文两个选项
<template>
<div class="navbar">
<span>Concept Tree Engineer</span>
<p></p>
<el-select style="width: 87px;" size="mini" v-model="value" @change="toggleLang" placeholder="请选择">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</template>
模板代码
b、创建script （配置默认为英文、配置下拉选择切换语言、配置首次进入获取用户缓存的语言进行显示）
<script>
export default {
name: 'Navbar',
data() {
return {
options: [{
value: 'en',
label: 'English'
}, {
value: 'zh',
label: '中文'
}],
value: 'en'
}
},
mounted(){
//用户每次刷新页面都判断 是否缓存过 语言，缓存过的话 选择其中显示的应该是缓存的语言
localStorage.getItem('locale') == 'en' ? this.value = 'en' : this.value = 'zh'
},
methods: {
toggleLang(lang) {
const loading = this.$loading({
lock: true,
text: this.$t("element.loadingText"),
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
setTimeout(function(){
loading.close();
},600)
if(lang == 'zh') {
localStorage.setItem('locale', 'zh')
this.$i18n.locale = localStorage.getItem('locale')
} else if(lang == 'en') {
localStorage.setItem('locale', 'en')
this.$i18n.locale = localStorage.getItem('locale')
}
}
}
}
</script>
配置代码
总结：
1、this.options 配置的是下拉框显示的option 和 选择后的value
this.value 是用户选择后双向绑定的 options.[index].value
2、toggleLang(lang)：用户选择后，调用toggleLang方法，判断是 选择的是英文 还是 中文。
如果是中文：将中文缓存起来，并且赋值给全局的i18n对象的locale。完成切换。
如果不是：将英文缓存起来，并且赋值给全局的i18n对象的locale。完成切换。
3、mounted()：vue生命周期钩子挂载完成后，获取缓存中的语言代码，绑定给下拉的vue。作用是，根据缓存的语言代码，设置下拉选项默认显示什么。
最后：展示成果
本文档意在与帮助初学者快速构建vue项目，虽没什么技术含量。但不要随意转载，如需转载保存，请署上 转载地址。谢谢配合。有问题随时交流，不怕打扰。