---

一、准备工作

请参照 Vue前端框架搭建 使用模板创建框架。

二、引入 vue-i18n 国际化插件

1.安装

本文的示例框架使用模版安装：

vue init airyland/vux2 test-t2.0
1

2.修改 main.js 将路由改造到 router/index.js 中

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import FastClick from 'fastclick'
import router from './router'
// import VueRouter from 'vue-router'
import App from './App'
// import Home from './components/HelloFromVux'
//
// Vue.use(VueRouter)
//
// const routes = [{
//   path: '/',
//   component: Home
// }]
//
// const router = new VueRouter({
//   routes
// })

FastClick.attach(document.body)

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  router,
  render: h => h(App)
}).$mount('#app-box')
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

3.修改 index.js

import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Hello from '@/components/HelloFromVux'
import Test from '@/views/test'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Hello',
      component: Hello
    },
    {
      path: '/test',
      name: 'test',
      component: Test
    }
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

4.修改 webpack.base.conf.js

加入 i18n 一段：

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: [
    'vux-ui',
    'progress-bar',
    {
      name: 'duplicate-style',
      options: {
        cssProcessorOptions : {
          safe: true,
          zindex: false,
          autoprefixer: {
            add: true,
            browsers: [
              'iOS >= 7',
              'Android >= 4.1'
            ]
          }
        }
      }
    },
    {
      name: 'i18n',
      vuxStaticReplace: false,
      staticReplace: false,
      extractToFiles: 'src/locales/components.yml',
      localeList: ['en', 'zh-CN']
    }
  ]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

5.yml 格式文件处理

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

npm install js-yaml-loader -D
1

修改 webpack.base.conf.js 加入处理 yml 文件规则：

  module: {
    rules: [
      ...
      {
        test: /.(yaml|yml)$/,
        loader: 'js-yaml-loader'
      }
    ]
  }
}
1
2
3
4
5
6
7
8
9
10

6.修改 main.js 配置 i18n

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

Vue.use(Vuex)

/** i18n **/
let store = new Vuex.Store({
  modules: {
    i18n: vuexI18n.store
  }
})

Vue.use(vuexI18n.plugin, store)

const finalLocales = {
  'en': objectAssign(vuxLocales['en'], componentsLocales['en']),
  'zh-CN': objectAssign(vuxLocales['zh-CN'], componentsLocales['zh-CN'])
}

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 {
  Vue.i18n.set('en')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

7.创建目录 src\locales

目录下建 all.yml 和 components.yml 文件。

8.创建 views\test.vue

<template>
  <div style="padding: 15px;">
    <button-tab>
      <button-tab-item selected>{{ $t('Today') }}</button-tab-item>
      <button-tab-item>{{ $t('This Week') }}</button-tab-item>
      <button-tab-item>{{ $t('This Month') }}</button-tab-item>
    </button-tab>
    <group :title="'i18n value is ' + value">
      <radio :selected-label-style="{color: '#FF9900'}" :options="options" v-model="value" @on-change="change"></radio>
    </group>
  </div>
</template>

<i18n>
  Today:
    en: Today
    zh-CN: 今天
  This Week:
    en: This Week
    zh-CN: 本周
  This Month:
    en: This Month
    zh-CN: 本月
</i18n>

<script>
  import {ButtonTab, ButtonTabItem, Group, Radio} from 'vux'
  export default {
    components: {
      ButtonTab,
      ButtonTabItem,
      Group,
      Radio
    },
    data () {
      return {
        value: 'zh-CN',
        options: [
          'zh-CN',
          'en'
        ]
      }
    },
    methods: {
      change (value, label) {
        console.log('change:', value, label)
        this.$nextTick(() => {
          this.$i18n.set(this.value)
        })
      }
    }
  }
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

9.运行

运行效果如下：

10.其它说明

如果不使用模板框架，需要安装以下插件：

npm i vux-loader -D
npm i vuex vux vuex-i18n -S
npm i object-assign -S
1
2
3