VueJS 使用i18n做国际化切换中英文
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
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项目,虽没什么技术含量。但不要随意转载,如需转载保存,请署上 转载地址。谢谢配合。有问题随时交流,不怕打扰。
VueJS 使用i18n做国际化切换中英文的更多相关文章
- Eclipse汉化后怎么改回英文版(可切换中英文)
Eclipse汉化后怎么改回英文版(可切换中英文) 很多朋友将MyEclipse汉化后还想改回英文的,其实只要修改MyEclipse的配置文件就可以了,这里我以MyEclipse7.0为例演示一下如何 ...
- 使用Privoxy做智能代理切换
使用Privoxy做智能代理切换 You take the blue pill, the story ends, you wake up in your bed, and believe whatev ...
- 利用session做国际化引起的old区内存爆满及修复方法
题记:昨天加班打车回家,看见前面有辆路虎在高速上开的巨慢,挡住了我坐的出租车的路,于是就跟司机吐槽了一句:“前面这车怎么这么面啊?”,司机沉默了大概3秒,说了一句富含哲理性的话:“没有面车,只有面人” ...
- C# 切换中英文输入法
在界面输入时,有时需要限定输入法. 在不自定义正则表达式或者其它输入处理的情况下,切换中英文时与当前语言栏匹配,有以下的几种系统方案: InputLanguage方案 使用System.Windows ...
- AutoCAD神器! AutoCAD自动切换中英文输入法插件(ZDSRF)
AutoCAD神器! AutoCAD自动切换中英文输入法插件 (一)功能特点: CAD命令中只能输入英文字符,不能输入中文,在文字编辑.文字输入.尺寸编辑中经常需要输入中文,此时就需要频繁的切换输入法 ...
- Mac OS 10.12 - 如何能够像在Windows一样切换中英文输入法和大小写键?
最开始,我切换中英文输入法和大小写键是按照下面博客做到的: http://www.cnblogs.com/sunylat/p/6415563.html 但是当我安装完毕搜狗输入法后,切换中英文输入法和 ...
- ubuntu16.04上在使用搜狗输入法时,按shift不能正常切换中英文
问题描述: ubuntu16.04上在使用搜狗输入法时,不知道把什么组合键给错按了,导致了按shift不能正常切换中英文,这是一件很烦恼的事儿! 解决步骤: 1,终端输入打开: fcitx-confi ...
- JS国际化网站中英文切换(理论支持所有语言)应用于h5版APP
网页框架类APP实现国际化参考文案一 参考:https://blog.csdn.net/CSDN_LQR/article/details/78026254 另外付有自己实现的方法 本人用于H5版的AP ...
- vue 国际化i18n 多语言切换
安装 npm install vue-i18n 新建一个文件夹 i18n ,内新建 en.js zh.js index.js 三个文件 准备翻译信息 en.js export default { ho ...
随机推荐
- C#异步编程之基于任务的异步模式
http://www.cnblogs.com/afei-24/p/6757361.html该文讲了基于任务的编程,这里再详细介绍一下.一.延续任务 private async static void ...
- 关于 Gojs 你可能用到的方法 / gojs自定义 / gojs
以下归纳如果对你有帮助的话请点下文章下面的推荐,谢谢! 1.阻止键盘事件 myDiagram.commandHandler.doKeyDown = function () { var e = myDi ...
- WPF 一 概述
创建一个项目吧 菜单>文件>新建>项目 看一看目录结构 WPF应用程序”会在“引用”里面自动添加下图中所示的 PresentationCore.PresentationFramewo ...
- [转] node.js如何获取时间戳与时间差
[From] http://www.jb51.net/article/89767.htm Nodejs中获取时间戳的方法有很多种,例如: 1.new Date().getTime() 2.Date. ...
- server 2012 R2查询端口
1. win+r弹出运行对话框,输入cmd,打开cmd窗口 netstat -ano | findstr "80" (注80是你想要看查看的端口号) 就会输出包含80端口使用的情况 ...
- EntityFramework 建立一对一关系
前言:本来要使用实体拆分实现一对一,但发现查询时无法单独查询,影响效率,故改用手动建立一对一关系 例: 实体类: public class TestDbContext : DbContext { pu ...
- js动态给textarea赋值
document.getElementById("new_analysed_news").value=datas.weatherContent;
- ansible 实战项目之文件操作(二)
一,前言 如果没有安装好的话看我以前的贴子哦!! 上次安装已经确定通了,所以下面步骤应该是完全ok的 特点: (1).轻量级,无需在客户端安装agent,更新时,只需在操作机上进行一次更新即可: (2 ...
- CountDownLatch 多线程,等待所有线程结束
CountDownLatch,一个同步辅助类,在完成一组正在其他线程中执行的操作之前,它允许一个或多个线程一直等待. 主要方法 public CountDownLatch(int count); 构造 ...
- 把linux图形启动界面修改成命令行界面
由于图形界面比较耗资源,需要把启动界面修改成命令行界面,怎么修改呢? 1.vim /etc/inittab 2.把id:5:initdefault:改成 id:3:initdefault: 3.重启即 ...