运用i18n 实现国际化（中英文切换）

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

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实现国际化，获取浏览器默认语言

index.js文件的相关代码如下：

import Vue from 'vue'
import VueI18n from 'vue-i18n'

Vue.use(VueI18n)

const navLang = navigator.language || navigator.userLanguage
let localLang = navLang || false
let lang = localLang || localRead('local') || 'enUS'
localStorage.setItem('lang', localLang)

const i18n = new VueI18n({
    locale: lang, // 语言标识
    messages: {
        'zhCN': require('./zh-CN.js'),
        'zhTW': require('./zh-TW.js'),
        'enUS': require('./en-US.js')
    }
})

export default i18n

通过浏览器语言自动切换

接下来主要做的就是在加载路由的时候让系统自动检测localStorage中的lang是否存在，如果存在则说明用户已经访问过我们的系统，如果不存在我们就为其添加lang设置。由于我们也不知道用户会从哪里进入系统，所以最好的是在每次路由加载的时候去处理，这里我们可以用到Vuerouter的beforeEach函数，具体可以参考：Vue实战040：nprogress页面加载进度条，这里有对beforeEach的介绍。

router.beforeEach((to, from, next) => {
 NProgress.start()
 if (!localStorage.getItem('lang')) {
 let lang = navigator.language
 if (lang === 'zh' || lang === 'zh-CN') {
 localStorage.setItem('lang', 'zh-CN')
 } else {
 localStorage.setItem('lang', 'en-US')
 }
 }
 next()
})

到这里你应该会发现一个问题，那就是第一次访问的时候并没有实现自动切换语言的功能，但是在localStorage中我们又可以看到lang已经被赋值，只有当页面再次刷新的时候才生效了。解决这个问题的办法就是将i18n.locale属性配置放入Vue中来，这样加载系统的时候就会自动去刷新i18n.locale属性了。

new Vue({
 router,
 store,
 i18n, // 挂载
 created () {
 i18n.locale = localStorage.getItem('lang')
 },
 render: h => h(App)
}).$mount('#app')