一個大系統(tǒng)從單語言版本轉(zhuǎn)向國際化，需要的花費大量的人力。如果是將語言設(shè)置在同一個文件，所有人都在不同時間點修改，沖突合并，每個人在沒有統(tǒng)一規(guī)范的情況下對英文key和value的命名不同，導(dǎo)致就算合并還要去找對方溝通。就需要一種既支持全局，又支持單頁面語言包配置的方案。

【CLI3構(gòu)建的項目】

如果你是用cli3構(gòu)建的項目，可以使用以下命令便捷安裝配置i18n
https://www.npmjs.com/package/vue-cli-plugin-i18n

vue add i18n

安裝過程會出現(xiàn)以下信息確認(rèn)

【默認(rèn)語言】? The locale of project localization. 
【備選語言】? The fallback locale of project localization. 
//fallbackLocale 這個參數(shù)是指當(dāng)當(dāng)前語言包內(nèi)找不到對應(yīng)key的時候去備選的語言包里面匹配
例如：{{$t('message')}}
查找順序 ：當(dāng)前vue文件內(nèi)的<i18n>  >> 當(dāng)前語言包 >> 備選語言包 >> $t內(nèi)的內(nèi)容（message）
【語言包地址】? The directory where store localization messages of project. It's stored under `src` directory. 
【單個文件支持語言設(shè)置】? Enable locale messages in Single file components ?

安裝完成項目會新增或者修改以下幾個文件

i18n文件.jpg

重點在第四個選項，【單個文件支持語言設(shè)置】,什么是單個語言設(shè)置，看下面這段代碼（true）

<!--
 * @Descripttion: 
 * @version: 
 * @Author: chenxch
 * @Date: 2019-08-22 23:02:53
 * @LastEditors: chenxch
 * @LastEditTime: 2019-11-13 01:26:35
 -->
<template>
  <div>
    這是動態(tài)路由<br>
    當(dāng)前語言：{{$i18n.locale === 'zh' ? '中文' : '英文'}}<br>
    <button @click="$root.$i18n.locale = 'zh'">中文</button>
    <button @click="$root.$i18n.locale = 'en'">英文</button>
    {{$t('message')}}
    {{$t('xc')}}
  </div>
</template>

<script>
export default {
  name: 'Xc',
  data()
    return {
         list:[this.$t('xc')]
    }
}
</script>

<i18n>
{
  "zh":{
    "xc": "喬巴兄"
  }
}
</i18n>

i18n切換.gif

這是在vue文件里面通過<i18n>標(biāo)簽去定義語言包，通過loader編譯成語言包

注意

切換的時候一定要切換this.$root.$i18n.locale,如果是切換this.$i18n.locale會出現(xiàn)只切換了當(dāng)前頁面下<i18n>內(nèi)的內(nèi)容。

【非CLI3構(gòu)建的vue項目】

首先需要安裝vue-i18n讓項目支持中英文

npm install vue-i18n

安裝完成后在入口文件內(nèi)配置

import VueI18n from 'vue-i18n';
import zh from '@/src/locales/zh';//引入本地語言包，自己新建
import en from '@/src/locales/en';
Vue.use(VueI18n);

const i18n = new VueI18n({
  locale: 'zh', // 語言標(biāo)識
  // this.$i18n.locale // 通過切換locale的值來實現(xiàn)語言切換
  messages: {
    zh: {
      message: '你好',//
      ...zh
    }, // 中文語言包
    en: {
      message: 'hello',
      ...en
    } // 英文語言包
  }
});

new Vue({
    i18n,
    router,
    store,
    render: h => h(App)
  }).$mount('#app');

element-ui國際化看這

全局國際化解決了，單頁面國際化還需進(jìn)行以下操作

通過上面案例可以發(fā)現(xiàn)單頁面（局部）國際化是通過<i18n>標(biāo)簽，這個標(biāo)簽需要通過vue-i18n-loader去編譯。
@kazupon/vue-i18n-loader

npm install @kazupon/vue-i18n-loader --save-dev

不同文件修改如下：
【webpack.base.js】

rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            i18n: '@kazupon/vue-i18n-loader'
          }
        }
      },
      // ...
    ]

【vue.config.js】

config.module
      .rule('i18n')
      .resourceQuery(/blockType=i18n/)
      .type('javascript/auto')
      .use('i18n')
      .loader('@kazupon/vue-i18n-loader')

或者參照cli3的

module.exports = {
  pluginOptions: {
    i18n: {
      locale: 'zh',
      fallbackLocale: 'en',
      localeDir: 'locales',
      enableInSFC: true
    }
  }
}

【js文件使用i18n】

import i18n from './i18n';
export function testFun(){
  retrun i18n.t('message');
}