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