vux UI 项目国际化

Posted 2020-12-26 jkingdom

第一步必须装 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>

最后给大家来张演示图