Vue + Element + i18n 国际化

1.安装Vue项目国际化需要的包---vue-i18n

npm install vue-i18n

2. 配置文件

• 由于需要把i18n作为独立模块使用，所以配置不写在main.js中。而是配置之后导出挂在在Vue下
• 1. i18n的配置文件：

import Vue from 'vue'   // 引入Vue
import VueI18n from 'vue-i18n' // 引入i18n
import locale from 'element-ui/lib/locale' // 引入element 国际化配置

import CN from './zh-CN' //自定义中文语言文件
import ID from './id.js' // 自定义印尼语言文件

Vue.use(VueI18n)  // 混入Vue 
 // 创建实例并且挂在自定义语言包
const i18n = new VueI18n({
  locale: 'cn', // 默认语言为中文
  messages: {
    cn: CN,
    id: ID
  }
})
locale.i18n((key, value) => i18n.t(key, value)) // 把element 的语言包挂在到i18n中
export default i18n // 导出实例

• 2. 中文语言包

// 引入element 中文包
import cnLocale from 'element-ui/lib/locale/lang/zh-CN'
// 导出为meaasges
export default {
  common: {
    homepage: '首页',
    logout: '登出'
  },
  audit: {
    mobile: '手机号：',
    app: '注册来源：',
    submit: '提交',
    error: {
      empty: '请输入手机号',
      uncorrect: '请输入正确的手机号'
    }
  },
  ...cnLocale // 混入element 中文包
}

• 3. 印尼语言包

import idLocale from 'element-ui/lib/locale/lang/id'

export default {
  common: {
    name: 'Sistem risiko',
    homepage: 'halaman  awal',
    logout: 'keluar'
  },
  menu: {
    audit: 'Analis'
  },
  audit: {
    mobile: 'nomor telepon:',
    app: 'sumber registrasi:',
    submit: 'Kirim',
    error: {
      empty: 'masukkan  nomor ponsel anda',
      uncorrect: 'silakan masukkan nomor ponsel yang benar'
    }
  },
  ...idLocale
}

• 4. main.js配置

import Vue from 'vue'
import i18n from './i18n/' //引入i8n配置
import router from './router/'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import store from './store'
import App from './App'

Vue.use(ElementUI)

Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  store,
  i18n, // 挂在在vue 下
  render: h => h(App)
})

3. 使用

• 如果是在html 中使用，直接$t('common.name')即可显示i18n的locale的对应的文件中的内容

// i18n index.js
const i18n = new VueI18n({
  locale: 'cn', // 默认语言为中文
  messages: {
    cn: CN,
    id: ID
  }
})

// vue HTML
<div>$t('common.homepage')</div> 
 // 显示为<div>首页</div> ，$t()内对象属性要加引号

• 如果是在vue 的js中使用，使用vue下挂载的i18n的t()

  methods: {
    audit() {
      if (!this.phone || !this.phone.trim()) return this.$message.error(this.$i18n.t('audit.error.empty'))
      if (!Number(this.phone)) return this.$message.error(this.$i18n.t('audit.error.uncorrect'))
    }
  }

• 语言切换
  vue-i18n提供一个全局的locale参数，改变locale可以切换语言

   changeLang() {
      if (this.$i18n.locale === 'cn') {
        this.$i18n.locale = 'id' //切换语言
        this.$store.commit('changeLang', 'id')
      } else {
        this.$i18n.locale = 'cn' // 切换语言
        this.$store.commit('changeLang', 'cn')
      }
    }