使用 vue-i18n 进行Vue国际化处理,使项目切换中英文(摘抄)
1.下载安装插件
命令进入项目目录,执行以下命令安装vue 国际化插件vue-i18n
1 | npm install vue-i18n --save |
2. 项目增加国际化翻译文件
在项目的src下添加lang文件夹增加中文翻译文件(zh.js)以及英文翻译文件(en.js),里面分别存储项目中需要翻译的信息。
en.js 英文语言包:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 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 中文语言包
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | 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: '坤达集团介绍' } } |
3. 项目引入
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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,这个不固定,只需要对应上。
4. 语言切换
1 2 3 4 5 6 7 8 9 10 11 12 13 | // 切换语言 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’时,就变成英文。
5.vue-i18n 数据渲染的模板语法
我们知道 vue 中对于文字数据的渲染,有以‘’{{}}‘’或者 v-text、v-html等的形式,同样的使用国际化后,依旧可以沿用,但需要一点修改
1 2 3 4 5 | //v-text: <span v-text= "$t('m.navbar.HOME')" ></span> //{{}}: <span>{{$t( 'm.navbar.HOME' )}}</span> |
6.iview组件中的中英文切换
1 2 3 | <FormItem :label= "$t('m.exchangeRate.Rate')" prop= "exchangeRate" > <Input clearable class = "longInput" v-model= "formValidate.exchangeRate" :placeholder= "$t('m.exchangeRate.input')" ></Input> </FormItem> |
7.如何实现整个项目语言切换
(1)所有获取数据的接口提供一个参数用于获取中文或英文的数据
(2)固定的展示文字的放入语言包中切换即可
(3)将当前语言类型存入cookie中
(4)进入页面即获取cookie中的语言类型去设置请求数据的接口所对应语言的参数
(5)切换语言时,首先判断当前语言是中文还是英文,并做对应的切换,最后将切换的语言存入cookie中
(6)问题:当前页面的接口无法切换语言
解决:重新刷新页面即可
原文地址:https://blog.csdn.net/qq_40542728/article/details/92661059
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步