vue2.0国际化的实现vue-i18n6.x

一个采用vue-cli搭建的单页面管理系统，采用了elementUI作为前端框架。为了实现多语言，便测试了vue-i18n的功能实现过程。kazupon.github.io/vue-i18n/en…

1、安装

npm install --save vue-i18n

2、引用 –为了方便后去优化，单独新建一个i18n.js文件

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)
// Ready translated locale messages
const messages = {
  zh: {
    message: {
      hello: '嗨，世界',
    }
  },
  en: {
    message: {
      hello: 'hello world',
    }
  },
  ja: {
    message: {
      hello: 'こんにちは、世界'
    }
  }
}
export default new VueI18n({
  locale: 'ja', // set locale
  messages, // set locale messages
})

3、调用–在main.js里面引入

import i18n from './i18n'
new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  i18n
})

4、在vue文件里面的实现

<p>{{ $t("message.hello") }}</p>

输出：こんにちは、世界

到此，国际化有了简单的实现。以上代码的vue-i18n版本为6.x。

但，总有但是，在想要实现下拉框进行语言选择切换的时候，发现很多页面都报错了，原来——vue-i18n版本为6.x 与 elementUI有冲突。详情可以查看element.eleme.io/#/zh-CN/com…

由于elementUI已经实现了整个项目的框架功能，不可能用其他UI替换，只能根据文档调整新的写法，如下：

main.js

import VueI18n from 'vue-i18n'
import ElementLocale from 'element-ui/lib/locale'
import messages from './duoyu/' //多语言文字
Vue.use(VueI18n);
//设置当前语言默认值--localStorage
let langNow;
if (localStorage.lang) {
  langNow = localStorage.lang;
} else {
  localStorage.lang = 'en';
  langNow = 'en';
}
// Create VueI18n instance with options
const i18n = new VueI18n({
  locale: langNow, // set locale
  messages, // set locale messages
});
ElementLocale.i18n((key, value) => i18n.t(key, value))//为了实现element插件的多语言切换

new Vue({
  el: '#app',
  template: '<App/>',
  components: { App },
  router,
  store
  i18n
}

duoyu文件夹的代码：

index.js

import en from './en'
import zh from './zh'
import ja from './ja'

export default {
  en: en,
  zh: zh,
  ja: ja
}

下面仅用 en.js做展示,enLocale是elementUi的多语言文件，通过…enLocale进行解析，与我们自己搭建的en.js进行合并

import enLocale from 'element-ui/lib/locale/lang/en'
export default {
  languages: [{
    text: 'Chinese',
    val: 'zh'
  }, {
    text: 'English',
    val: 'en'
  }, {
    text: 'Japanese',
    val: 'ja'
  }],
  duoyu: {
    message: {
      hello: 'hello world',
    },
  },
  ...enLocale
}

备注：

在js代码里面调用多语言字段

this.$t('duoyu.message.hello')

语言切换动作

localStorage.lang = this.searchkey.lan;
this.$i18n.locale = this.searchkey.lan