vux UI 项目国际化

第一步必须装 vux vux-loader vuex 和vuex-i18n

npm i vux-loader -D
npm i vuex vux vuex-i18n -S

安装完成需要配置webpack.base.conf.js
为了降低使用成本及不侵入原来配置，只需要调用merge方法对原来webpack配置进行操作：

//引入vuxLoader
const vuxLoader = require('vux-loader')
const webpackConfig = {} // 原来的 webpack.base.js 配置
module.exports = vuxLoader.merge(webpackConfig, {
 plugins:[
    {name:'vux-ui'},
    {
      name: 'i18n',
      vuxStaticReplace: true,
      staticReplace: true,
      extractToFiles: 'src/locales/components.yml',
      localeList: ['en', 'zh-CN','tw']
    }

  ]
})

使用vux组件和其他UI库有点不太一样，为了防止全部引入导致体积过大，你只需要在需要的地方引入，然后注册

import {aaa} from 'vux'
export default  {
    components:{
      aaa,
    }
}

如果全要全局注册某一组件，只需要在入口文件全局注册就OK
例如

import {***} from 'vux';
Vue.use(***)

这里提示一点
如果项目引入vux组件就报各种错误 具体错误我记不太清楚，就是各种loader 引起错误，查了好久，发现是vue-loader 版本过高，导致出现错误，最后把vue-loader 降到 vue-loader@12.2.2
或者把vux-loader 更新最新版本

第二步国际化然后分别引入

import Vuex from 'vuex'  
import vuexI18n from 'vuex-i18n'  

使用插件

Vue.use(Vuex)
let store = new Vuex.Store({
  modules: {
    i18n: vuexI18n.store
  }
})
Vue.use(vuexI18n.plugin, store)

注意：如果在使用过程中报如下错误

在入口文件中类似这样全局注册插件

let store = new Vuex.Store({
  modules: {
    i18n: vuexI18n.store
  }
})
Vue.use(vuexI18n.plugin, store)
import { ConfirmPlugin, LocalePlugin} from 'vux'
Vue.use(ConfirmPlugin)
Vue.use(localePlugin)

注意点：
* 第一 Vue.use(***)一定要放在store变量下
* 第二 组件中就不要再类似下面这种写法了，

import { ConfirmPlugin} from 'vux'
Vue.use(ConfirmPlugin)

第三部在入口文件配置多语言

这里是vux入口文件链接main.js
大家可以参考vux配置
首先安装 object-assign包

npm install object-assign -S

入口文件

import objectAssign from 'object-assign'
import vuxLocales from './locales/all.yml'
import componentsLocales from './locales/components.yml'
// 引入vux localePlugin插件 保存本地语言环境
import {localePlugin} from 'vux'

//本地语言环境
const finalLocales = {
  'en': objectAssign(vuxLocales['en'], componentsLocales['en']),
  'zh-CN': objectAssign(vuxLocales['zh-CN'], componentsLocales['zh-CN']),
 'tw': objectAssign(vuxLocales['tw'], componentsLocales['tw'])
}

for (let i in finalLocales) {
  Vue.i18n.add(i, finalLocales[i])
}
Vue.use(LocalePlugin)
const nowLocale = Vue.locale.get()
if (/zh/.test(nowLocale)) {
  Vue.i18n.set('zh-CN')
} else if (/en/.test(nowLocale)) {
  Vue.i18n.set('en')
} else {
  Vue.i18n.set('tw')
}

然后 在src文件夹下新建locales语言包 文件夹 在里面新建 all.yml, en.yml, zh-CN.yml, tw.yml, components.yml 如下图

由于语言文件是.yml格式，所以需要安装js-yaml-loader包来处理.yml文件

npm install js-yaml-loader -D

webpack.base.conf.js 配置处理这种文件的规则

{
        test: /\.(yaml|yml)$/,
        loader: 'js-yaml-loader'
      },

在页面弄一个切换语言按钮 来改变语言

  hello:
    en: hello vue
    zh-CN: 你好Vue
    tw: 你號Vue

最后给大家来张演示图