第一步必須裝 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 降到 [email protected]
或者把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‘
      },

在頁面弄一個切換語言按鈕 來改變語言

<i18n>
  hello:
    en: hello vue
    zh-CN: 你好Vue
    tw: 你號Vue
</i18n>
<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h2>{{$t(‘hello‘)}}</h2>
    <router-link :to="{path:‘news‘}">新聞列表</router-link>
    <button @click="changeLanguage"> 切換語言</button>
    <login></login>
    <XDialog v-model="dialogStatus" :hide-on-blur="true">
      <div class="e-dialog">
        <div class="e-dialog-content">
          <Radio
            title="請選擇語言"
            v-model="value"
            :options="options" @change="check">
          </Radio>
        </div>
      </div>
    </XDialog>
    <router-view/>
  </div>
</template>

<script>
import {Radio} from ‘mint-ui‘
import login from ‘./components/login‘
import { XDialog } from ‘vux‘
export default {
  name: ‘App‘,
  data () {
    return {
      dialogStatus: true,
      value: ‘zh-CN‘,
      options: [
        {label: ‘中文‘, value: ‘zh-CN‘},
        {label: ‘English‘, value: ‘en‘},
        {label: ‘繁體‘, value: ‘tw‘}
      ]
    }
  },
  methods: {
    changeLanguage () {
      this.dialogStatus = !this.dialogStatus
    },
    check () {
      this.$nextTick(() => {
         this.$i18n.set(this.value)
      })
      this.dialogStatus = false
    }
  },
  components: {
    login,
    XDialog,
    Radio
  }
}
</script>

<style>
  @import "common/css/mint.css";
#app {
  font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

最後給大家來張演示圖

vux UI 項目國際化