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

View Code

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

View Code

4.1.4 en/index.js

import common from './common.json'

export default {
  common
}

View Code

4.1.5 en/common.json

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

View Code

4.1.6 zh_cn/index.js

同 4.1.4 en/index.js

4.1.7 zh_cn/common.json

{
  "webName": "用户管理系统",
  "translations": "English"
}

View Code

以上是按照语言格式进行多文件分类的实现，下面是按照功能模块进行多文件分类的实现

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

View Code

4.2.3 i18n/login.js

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

export const zh = {
  "title": "标题"
}

View Code

4.2.4 i18n/test.js

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

export const zh = {
  "title": "标题",
  "err": "错误信息"
}

View Code