vue实现多语言项目（vue-i18n）

安装vue-i18n

我们使用npm安装vue-i18n。

npm install vue vue-i18n --save

在vue项目src文件夹下新建一个 i18n 文件夹存放i18n要用的文件

 语言包lang下的cn.js和en.js

//cn.js
module.exports = {
  lange: {
    welcome: '欢迎来到北京',
    today: '今天是',
    week: {
      sun: '星期日',
      mon: '星期一',
      tues: '星期二',
      wed: '星期三',
      thur: '星期四',
      fri: '星期五',
      sat: '星期六'
    }
  }
}

//en.js
module.exports = {
  lange: {
    welcome: 'Welcome to Beijing.',
    today: 'Today is ',
    week: {
      sun: 'Sunday',
      mon: 'Monday',
      tues: 'Tuesday',
      wed: 'Wednesday',
      thur: 'Thursday',
      fri: 'Friday',
      sat: 'Saturday'
    }
  }
}

i18n下index.js来配置i18n

import VueI18n from 'vue-i18n'   //引入vue-i18n
import Vue from 'vue'
 
Vue.use(VueI18n)
var locale;
localStorage.getItem('locale') ? locale = localStorage.getItem('locale') : locale = 'cn';
const i18n = new VueI18n({
  locale: locale,    // 语言标识
  messages: {
    'cn': require('./lang/cn'),   // 中文语言包
    'en': require('./lang/en'),   // 英文语言包
  },
})
 
export default  i18n

这里讲解一下为什么上面要用到localStorage.getItem('locale')，因为vue整个项目都是多语言的，做本地存储的目的是希望在被刷新的时候依然不会改变当前选中的语言，下面会做进一步讲解。

还需要在main.js引入i18n并具名在vue

import i18n from './i18n'  //引入i18n
new Vue({
  el: '#app',
  router,
  i18n,  //这里需要具名
  store,
  components: { App },
  template: '<App/>'
})

 

写一个lange.vue来做多语言切换（集体怎么写就不多说了，说重要部分）

在模板中使用

{{ $t("lange.welcome") }}

js中使用：

this.$t("lange.welcom")

最后在选择确认哪一种语言时，需要将上面的type（eg: cn / en）存入到i18n的locale，这样一来会马上执行匹配当前的语言,除此之外还需要将type存入本地，为了防止刷新后所选择的语言包不是当前的语言包

this.$i18n.locale = this.locale;  //修改i18n的locale值，
localStorage.setItem('locale',this.locale);  //存入本地的locale值