Vue i18n多语言国际化

最近公司业务迁移到国外所以有个需求就是将所有公司项目加上多语言的功能，当然不限于中英文，还有包括乌克兰和俄语，其实都大同小异逻辑都是一样的。毕竟第一次写国际化所以这里就记录下。

由于项目用的UI框架是elementUI，所以我们可以参照elementUI里的国际化模板进行编写。

首先我们npm安装语言包

npm install vue-i18n

配置
首先新建语言包所在的文件夹，如下图所示，目录地址与main.js同级

image.png

接着在lang目录下的index.js配置

import Vue from 'vue'
import enLocale from 'element-ui/lib/locale/lang/en'
import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
import VueI18n from 'vue-i18n'
import zh from '@/lang/zh.js'
import en from '@/lang/en.js'
Vue.use(VueI18n)
const messages = {
  en: {
    ...en,
    ...enLocale // 或者用 Object.assign({ message: 'hello' }, enLocale)
  },
  zh: {
    ...zh,
    ...zhLocale // 或者用 Object.assign({ message: '你好' }, zhLocale)
  }
}

const i18n = new VueI18n({
  locale: localStorage.getItem('lang'), // set locale
  messages, // set locale messages
})

export default i18n

在main.js中引入文件

import i18n from './lang'

引入国际化插件

Vue.use(elementUI, {
  i18n: (key, value) => i18n.t(key, value)
})

最后将i18n注入vue实例化中

// 实例化 vue
  new Vue({
    i18n,
    router,
    store,
    render: h => h(App)
  }).$mount('#app')

我们来看具体项目例子

我们在lang文件夹下的en.js中填写以下代码

export default {
  income: {
    undistributed: 'Undistributed',
    distribute: 'Distribute',
  }
}

zh.js中填写以下代码

export default {
  income: {
    undistributed: '未分币',
    distribute: '已分币',
  }
}

然后在HTML文件中进行模板渲染

image.png

最后效果如下图

image.png