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": "错误信息"
}
vue-i18n多语言文件归类的两种方法的更多相关文章
- PDF怎么转换为CAD文件?这两种方法你的会
在日常的办公中,我们最常见的文件格式就是PDF格式的,因为PDF文件的安全性是比较高的,可以防止不小心触碰到键盘修改文件内容,而且PDF文件便于进行文件的传输.但是有时候也需要将PDF转换成CAD,那 ...
- Oracle导出表(即DMP文件)的两种方法
转载:http://blog.csdn.net/lanpy88/article/details/7580691 方法一:利用PL/SQL Developer工具导出: 菜单栏---->Too ...
- upload控件上传json文件合并的两种方法
方法一: byte[] byte1 = FileUpload1.FileBytes; byte[] byte2 = FileUpload2.FileBytes; byte[] a1 = Encodin ...
- C#根据字体名通过注册表获取该字体文件路径(win10)两种方法推荐第二种
方法一: 直接先上源码: private System.Collections.Generic.SortedDictionary<string, string> ReadFontInfor ...
- java写文件时往末尾追加文件(而不是覆盖原文件),的两种方法总结
代码如下: import java.io.FileWriter; import java.io.IOException; import java.io.RandomAccessFile; public ...
- Java遍历文件夹的两种方法(非递归和递归)
import java.io.File; import java.util.LinkedList; public class FileSystem { public static int num ...
- android获取文件getMimeType的两种方法
方法1: import java.util.Locale; private static String getSuffix(File file) { if (file == null || !file ...
- python语言实现阶乘的两种方法---递归和迭代
阶乘的递归实现,代码如下: def factorial(n): if n==1: return 1 else: return n*factorial(n-1) number = int(input(& ...
- vue路由跳转传参的两种方法
路由跳转: this.$router.push({ name: '工单列表', params: {p_camera_dev_name: 'xxx'} }); 使二级菜单呈点击状态: $('[index ...
随机推荐
- 重新学习CSS,认识CSS3中的属性
之前学css,觉得会改个样式就不错了,直到现在,在做前端开发的时候,才发现自己的前端页面是有多垃圾,而且还不知道该怎么适应各个浏览器,总是很“词穷”,最近是想着好久没去慕课上面了,于是就报着逛一逛的心 ...
- java获取指定月份有几个星期x,获取指定月份跨了多少个星期
例如获取2020年5月一共有多少个星期二,一共跨了多少个星期 public class MainTest { public static void main(String[] args) throws ...
- 【PAT甲级】1016 Phone Bills (25 分)(结构体排序)
题意: 输入24个正整数代表从0到23每个小时通话一分钟花费的美分.输入一个正整数N(<=1000),然后输入N组字符串,每个字符串包含客户的名字和通话的时刻以及打出或者挂断的状态. 按照字典序 ...
- react - get或set 取值函数
取值函数(getter)和存值函数(setter) 您可以添加以get或set为前缀的方法来创建getter和setter,它们是根据您正在执行的操作执行的两个不同的代码:访问变量或修改其值.对某个属 ...
- H5不支持的标签
<acronym> 定义首字母缩写. <applet> 定义applet <basefont> 定义文档中所有文本的默认颜色.大小和字体.请用CSS代替 < ...
- Django 执行 manage 命令方式
本人使用的Pycharm作为开发工具,可以在顶部菜单栏的Tools->Run manage.py Task直接打开manager 命令控制台 打开后在底部会有命令窗口: 或者,也可以在Pytho ...
- CS231n -Assignments 1 Q1 and Q2
前言 最近在youtube 上学习CS231n的课程,并尝试完成Assgnments,收获很多,这里记录下过程和结果以及过程中遇到的问题,我并不是只是完成需要补充的代码段,对于自己不熟悉的没用过的库函 ...
- Flask 教程 第二十二章:后台作业
本文翻译自The Flask Mega-Tutorial Part XXII: Background Jobs 这是Flask Mega-Tutorial系列的第二十二部分,我将告诉你如何创建独立于W ...
- hbase meta中分区信息错误的记录
bulk write hbase 时遇到下面的错误: 19/03/20 02:16:02 ERROR LoadIncrementalHFiles: IOException during splitti ...
- 为什么maven没有.m2文件
该问题可能描述不清,建议你重新提问 为什么maven没有.m2文件 彼岸之恋°DD | 浏览 4793 次 问题未开放回答 2016-09-23 17:29 最佳答案 对于初学者在安装配置好maven ...