1.下载安装插件

命令进入项目目录，执行以下命令安装vue 国际化插件vue-i18n

npm install vue-i18n --save

2. 项目增加国际化翻译文件

在项目的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:'坤达集团介绍'}
}

3. 项目引入

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. 语言切换

// 切换语言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等的形式，同样的使用国际化后，依旧可以沿用，但需要一点修改。

//v-text:
<span v-text="$t('m.navbar.HOME')"></span>//{{}}:
<span>{{$t('m.navbar.HOME')}}</span>

6.iview组件中的中英文切换

<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）问题：当前页面的接口无法切换语言

解决：重新刷新页面即可

location.reload();

使用 vue-i18n 进行Vue国际化处理，使项目切换中英文相关推荐

Vue-i18n，非常好用的前端国际化插件，智能切换中英文
在项目的开发过程中,很多时候,项目都需要进行国际化,如果项目是基于Vue框架开发的,那国际化就更加简单了,可以通过Vue-i18n的插件进行前端页面的国际化,下面是主要的步骤: 1.安装依赖包 npm ...
vue中开发多语言（国际化）,vue+i18n（详细教程）
目录第一步: 第二步: 第三步: 第四步: 最后: 前言:我们有时候会遇到一个项目需要支持多语言,而用直接翻译的插件时常会导致翻译的结果跟自己预想的有所偏差或者结果太长造成页面结构紊乱而这个时候就需 ...
vue 使用i18n实现多语言包国际化网站
前言有些项目我们需要支持多种语言切换,满足国际化需求. vue-i18n是一个vue插件,主要作用就是让项目支持国际化多语言,使用方便快捷,能很轻松的将我们的项目国际化.本文主要介绍使用vue-i1 ...
vue i18n 国际化保姆级教程_看不懂自己找原因
1.国际化介绍对于一些跨国项目来说,国际化是尤为重要的,那么什么要国际化呢?国际化的意思就是将我们写的项目,能够根据不同国家的语言,进行翻译,进行切换,方便不同国家的客户使用基本思路如下 ① 定义 ...
14.i18n在vue项目中使用(国际化)
i18n:i18n是 Internationalization 这个英文的简写,即国际化的意思,vue-i18n是一款针对于vue开发的国际化插件,让项目支持多语言切换,以适应不同地区用户的需求. 1 ...
vue i18n 国际化使用方法
1 先安装 npm install vue-i18n 2 新建文件assets/js/i18n.js 3 引入vue-i18n并注册到vue上 import VueI18n from 'vue-i ...
vue+elementUI+vue-i18n 实现国际化
需求提的比较着急,匆忙看了一些相关文章就开始上手,踩了些坑,不过好歹是完成了. 前提一般来说,语言环境存储在本地还是服务器上是个值得根据产品来思考的事情.最开始,我是把用户设置的语言存储在 cook ...
vue/uniapp实现语言国际化（中英文切换）
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录一.vue-i18n是什么? 二.使用步骤 1.安装vue-i18n 2.新建文件夹 3.在main.js 中引入 4.在页 ...
前端框架Vue——vue-i18n ，vue项目中如何实现国际化，$t的用法
前端框架Vue--vue-i18n ,vue项目中如何实现国际化,$t的用法 vue中html页面写入$t('')怎么显示

使用 vue-i18n 进行Vue国际化处理，使项目切换中英文