vue I18n 让你的项目支持多种语言

• 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

概述

vue-i18n是一个适用于Vue项目的国际化库，借助这个库可以方便地在一个项目中支持多国语言。在现成的项目中添加vue-i18n是非常方便的，本文假设你已经有了自己的Vue项目。

引用

下载依赖包：npm install vue-i18n

创建语言包

这里我们模拟创建中英文两种语言包 zh.js en.js

//ch.js
module.exports = {
    message: {
      Username: '用户名',
      Language: '语言',
      zh: '中文',
      en: '英文'
    },
   }

//en.js
module.exports = {
    message: {
      Username: 'Username',
      Language: 'Language',
      zh: 'Chinese',
      en: 'English'
    },
   }

在main.js中引入

import Vue from 'vue'
import VueI18n from 'vue-i18n'
Vue.use(VueI18n)

//引入Element UI的英文包
import enLocale from 'element-ui/lib/locale/lang/en'
//引入Element UI的中文包
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'

const i18n = new VueI18n({
   locale: 'zh',    //默认语言标识
   messages: {
     'zh': Object.assign(require('./assets/lang/ch'),zhLocale), //中文语言包
     'en': Object.assign(require('./assets/lang/en'),enLocale),//英文语言包
   }
 })
 
 new Vue({
   router,
   i18n, //**必须挂载在这里**
   render: h => h(App)
}).$mount('#app')

使用

基本语法，与vue基本语法类似，在基本语法基础上用 $t('')包裹变量

// 1. vue组件模板的使用 
   <div>{{$t('message.zh')}}</div> 
   
// 2. vue组件模板数据绑定的使用 
   <input :placeholder="$t('message.zh')"/>
   
// 3.vue组件data中赋值的使用
   data:{ msg:this.$t('message.zh'); }

实例

<template>
  <div class="about">
    <div class="lang">
      <el-radio-group v-model="language" size="mini">
          <el-radio v-for="(item,index) in options" :label="item.value" :key="index">
            {{item.label}}
          </el-radio>
      </el-radio-group>
    </div>
    <div>{{$t('message.zh')}}</div>
    <el-input :placeholder="$t('message.Username')"></el-input>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
    mounted() {
      this.$i18n.locale === 'zh' ? this.language = 0 : this.language = 1   // 数据加载时判断当前属于哪种语言，为其单选按钮赋值
    },
    data() {
      return {
        language: 0,
        options: [
          {
            label: this.$t('message.zh'), // 模板语法的一种
            value: 0
          }, {
            label: this.$t('message.en'),
            value: 1
          }
        ]
      }
    },
    watch: {  
      language: function (val) {  // 侦听单选按钮的变化，从而进行切换语言
        val === 0 ? this.$i18n.locale = 'zh' : this.$i18n.locale = 'en';
        Vue.set(this.options, 0, {label: this.$t('message.zh'), value: 0});
        Vue.set(this.options, 1, {label: this.$t('message.en'), value: 1})  
      }
    },
  }
  </script>

实例页面效果如下：