vue-i18n多語言文件歸類的兩種方法

1.按語言類型歸類

流行的做法是按照語言對文件進行歸類，目錄結構類似於：

--lang
----en
------test.json
--------"abc": "abc"
----zh
------test.json
--------"abc": "測試"

這樣處理有個問題，就是沒出添加一項，都要同時切換到兩個文件中進行添加，開發起來很麻煩，

2.按功能模塊分類

還有個方法就是按照功能模塊分類，一個文件中包含了這個功能下的所有語言，目錄結構類型下面：

--lang
----test.js
------en
--------"abc": "abc"
------zh
--------"abc": "測試"

這樣的話，開發過程中，只需要關注一個文件，就能完成所有國際化設置.

3.兩種方式對比

按照語言進行分類的好處，就是加載時會根據本地語言環境加載不同的語言包，不用一次性加載所有的，按照模塊分類的好處就是，開發容易了，編寫國際化項的時候，只關注一個文件就行了。

開發流行的還是按照語言分類，然后輔助一多語言工具來管理；

 

4.兩種方式的實現方法

4.1按語言包實現代碼

4.1.1目錄結構

i18n
--en
----index.js
----common.json
--zh_CN
----index.js
----common.json

4.1.2main.js

import Vue from 'vue'
import App from './App.vue'
import i18n from './i18n'

Vue.config.productionTip = false

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

4.1.3 i18n/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import Cookie from 'vue-cookie'
import ZH from './zh_CN'
import EN from './en'

Vue.use(Cookie)
Vue.use(VueI18n)

const loc = Cookie.get('lang')

const i18n = new VueI18n({
  locale: loc || 'zh',
  messages: {
    en: EN,
    zh: ZH
  }
})

export default i18n

4.1.4 en/index.js

import common from './common.json'

export default {
  common
}

4.1.5 en/common.json

{
  "webName": "User Management System",
  "translations": "中文"
}

4.1.6 zh_cn/index.js

同 4.1.4 en/index.js

4.1.7 zh_cn/common.json

{
  "webName": "用戶管理系統",
  "translations": "English"
}

以上是按照語言格式進行多文件分類的實現，下面是按照功能模塊進行多文件分類的實現

4.2 按功能模塊進行文件分類

4.2.1 目錄結構

i18n
--index.js
--login.js
--test.js

4.2.2 main.js

　　　同 4.1.2 main.js

4.2.2 i18n/index.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import {zh as loginZh, en as loginEn} from './login'
import {zh as testZh, en as testEn} from './test'

Vue.use(VueI18n)

let EN = {
  login: loginEn,
  test: testEn
}
let ZH = {
  login: loginZh,
  test: testZh
}

const i18n = new VueI18n({
  locale: 'zh',
  messages: {
    en: EN,
    zh: ZH
  }
})

export default i18n

4.2.3 i18n/login.js

export const en = {
  "title": "title"
}

export const zh = {
  "title": "標題"
}

4.2.4 i18n/test.js

export const en = {
  "title": "title",
  "err": "error"
}

export const zh = {
  "title": "標題",
  "err": "錯誤信息"
}