命令进入项目目录,执行以下命令安装vue 国际化插件vue-i18n
npm install vue-i18n --save
在项目的src下添加lang文件夹增加中文翻译文件(zh.js)以及英文翻译文件(en.js),里面分别存储项目中需要翻译的信息。
en.js 英文语言包:
export const m = {
// 导航栏
navbar:{
HOME:'HOME',
ABOUTUS:'ABOUT US',
SERVICES:'SERVICES',
LIVERATE:'LIVE RATE',
NEWS:'NEWS',
CONTACTUS:'CONTACT US'
},
// 底部
footer:{
CONTACTUS:'CONTACT US',
WEBSITENAVIGATION:'WEBSITE NAVIGATION',
ABOUTUS:'ABOUT US',
OURSERVICES:'OUR SERVICES',
NEWS:'NEWS',
LIVERATE:'LIVE RATE',
CUSTOMERSERVICE:'CUSTOMER SERVICE',
WECHAT:'WECHAT'
},
// 首页
index:{
SERVICES:'SERVICES',
NEWS:'NEWS',
GOLDMATENEWS:'GOLDMATE NEWS',
MARKETINSIGHT:'MARKET INSIGHT',
KUNDAX:'KUNDAX',
GOLDMATE:'GOLDMATE',
GOLDMATEGROUP:'GROUP',
KUNDAGROUP:'GROUP'
}
}
zh.js 中文语言包
export const m = {
// 导航栏
navbar:{
HOME:'首页',
ABOUTUS:'关于我们',
SERVICES:'主营业务',
LIVERATE:'实时汇率',
NEWS:'最新资讯',
CONTACTUS:'联系我们'
},
// 底部
footer:{
CONTACTUS:'联系我们',
WEBSITENAVIGATION:'网站地图',
ABOUTUS:'关于我们',
OURSERVICES:'主营业务',
NEWS:'最新资讯',
LIVERATE:'实时汇率',
CUSTOMERSERVICE:'客服热线',
WECHAT:'微信公众号'
},
// 首页
index:{
SERVICES:'主营业务',
NEWS:'最新资讯',
GOLDMATENEWS:'公司要闻',
MARKETINSIGHT:'汇市动态',
KUNDAX:'坤达速汇',
GOLDMATE:'中联汇兑',
GOLDMATEGROUP:'中联集团介绍',
KUNDAGROUP:'坤达集团介绍'
}
}
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: 'zh-CN', // 语言标识
//this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh-CN': require('./lang/zh'), // 中文语言包
'en-US': require('./lang/en') // 英文语言包
}
})
new Vue({
el: '#app',
router: router,
i18n,// 不要忘记
render: h => h(App),
mounted () {
},
created () {
}
});
上面的代码正式将 vue-i18n 引入 vue 项目中,创建一个 i18n 实例对象,方便全局调用。我们通过 this.$i18n.locale
来进行语言的切换。当 locale 的值为‘zh-CN’时,版本为中文;当 locale 的值为‘en-US’,版本为英文。当然你也可以换成 zh 和 en,这个不固定,只需要对应上。
// 切换语言
changeLanguage() {
if (this.language == "zh-CN") {
this.language = "en-US";
this.$i18n.locale = this.language; //关键语句
this.addCookie("lang", this.language);
} else {
this.language = "zh-CN";
this.$i18n.locale = this.language; //关键语句
this.addCookie("lang", this.language);
}
location.reload();
},
this.$i18n.locale
,当你赋值为‘zh-CN’时,就变成中文;当赋值为 ‘en-US’时,就变成英文。
我们知道 vue 中对于文字数据的渲染,有以‘’{{}}‘’或者 v-text、v-html等的形式,同样的使用国际化后,依旧可以沿用,但需要一点修改。
//v-text:
//{{}}:
{{$t('m.navbar.HOME')}}
公司项目如此:
(1)所有获取数据的接口提供一个参数用于获取中文或英文的数据
(2)固定的展示文字的放入语言包中切换即可
(3)将当前语言类型存入cookie中
(4)进入页面即获取cookie中的语言类型去设置请求数据的接口所对应语言的参数
(5)切换语言时,首先判断当前语言是中文还是英文,并做对应的切换,最后将切换的语言存入cookie中
(6)问题:当前页面的接口无法切换语言
解决:重新刷新页面即可
location.reload();