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'

      },

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

<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>