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

相关文章: