vue（+Element）项目用vue-i18n实现国际化

一、前言

vue+element开发的项目实现国际化还是比较简单的，特别是对于前后端完全分离的项目。基于Node构建的Vue项目是有成熟的方案：vue + vue-i18n。但是其中还是有值得留意的点，特别是对于第一次实现国际化的童鞋。

二、demo效果展示

1、在首页选择语种实现语种切换

2、内容页的中文效果

3、内容页的英文效果

三、前端实现国际化

1、安装vue-i18n

我的项目是基于vue开发的，首先需要安装vue-i18n，推荐使用cnpm（npm也可以，不过可能会比较慢）安装。输入命令：

npm install vue-i18n

当然也可以采取最简单粗暴的方式：

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script>

2、一些简单的配置

先在 main.js 中引入 vue-i18n

// 导入国际化模块
import VueI18n from 'vue-i18n';

// 挂载
Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'zh-hans', // 语言标识
  messages: {
    'zh-hans': require('./common/lang/zh-hans'),  // 中文语言包
    'en': require('./common/lang/en')   // 英文语言包
  }
});

new Vue({
  el: '#app',
  router,
  i18n,		//  注意注意，不要把这个丢了！
  store,
  components: { App },
  template: '<App/>'
})

3、准备语种包

语种包其实就是js文件（每个语种对应一个js文件,我的项目目前有两个语种）

大概展示一下这两个文件“内部构造”：
en.js

module.exports = {
    operation: {
        cancle: 'Cancle',
        confirm: 'Confirm'
    },
    header: {
        back: 'Return',
        homepage: 'Home',
        file: 'File',
        sampleProgram: 'Sample Program',
        language: 'Language'
    },
    ...       // ...表示还有很多类似的结构
    }

zh-hans.js

module.exports = {
    operation: {
        cancle: '取消',
        confirm: '确定'
    },
    header: {
        back: '返回',
        homepage: '主页',
        file: '文件',
        sampleProgram: '示例程序',
        language: '语言'
    },
    ...       // ...表示还有很多类似的结构
    }

4、实现语种切换功能

现在只需要通过触发事件的形式，来控制 locale 的值，调用对应的语种包就可以实现国际化了。待我娓娓道来…
在main.js中的这块（详见上文中：2、一些简单的配置）

const i18n = new VueI18n({
  locale: 'zh-hans', // 语言标识
  messages: {
    'zh-hans': require('./common/lang/zh-hans'),  // 中文语言包
    'en': require('./common/lang/en')   // 英文语言包
  }
});

locale后面的值就是你当前的语种，我们就是通过操作这个值来实现语种切换。
具体写‘zh-hans’还是写’zh’或者别的不重要，关键要和messages中的对应就可以。
现在来通过组件中的点击事件实现吧：
切换到中文：

    getChinese() {
      this.setLanguageText('中文');	// 这是在vuex中存的当前语种的显示提示文字；
      this.$i18n.locale = "zh-hans";  // i18n切换语种的关键语句，这块更加严谨的逻辑是做一个if判断，判断当前的语种是否为英语，是的话就切换为中文，否则就不变
      }

切换到英文（注释说明同上）：

    getEnglish() {
      this.setLanguageText('English');
      this.$i18n.locale = "en"; 
      }

5、vue-i18n 数据渲染的模板语法

这里要注意啦！直接在标签中使用和写在标签内部的属性值的模板语法是不一样的。

<div>{{ $t("header.file") }}</div>

<input  :placeholder="$t('input.placeholder')"  v-model="onlineName"  />

6、v-for渲染数据的国际化实现

直接附上链接吧：https://segmentfault.com/q/1010000016993927

7、后端请求来的数据国际化实现

对于从后端接口请求过来的数据要实现国际化，我们是做了两个接口，前端监测选择不同的语种调用不同的接口，对应拿到所选语种的数据进行展示。

到此为止，国际化的功能就实现啦

欢迎各位小伙伴一起讨论、学习，有疑问就留言吧，哈哈。同时也欢迎指正。