第一步必須裝 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'
},在頁面弄一個切換語言按鈕 來改變語言
<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>
最後給大家來張演示圖
