VUE实现Studio管理后台(三):支持多语言国际化(vue-i18n)
RXEditor的第一版本是英文版,有些朋友看起来觉得不习惯,后来因为惰性,不愿意再修改旧代码加入中文版,这次提前就把这个问题解决了,克服惰性最好的方式,就是想到就尽快去做,避免拖延。
本来计划在界面的右上角,做一个下拉菜单选择语言。下拉菜单的工作量稍稍有些大,并且很少有随时切换界面语言的需求。最终确定获取浏览器语言环境,并使用浏览器的语言设置。也就是说,用中文浏览器打开就是中文版,用英文浏览器打开就是英文版,用这样的方式无感切换,工作量小,又好用(嗯,言外之意,我的决定是最好的)。
确定下实现方式,马上开工:
1、安装vue-i18n插件:
npm i vue-i18n -S
2、在assets目录下新建locales,用于存放字典相关文件,语言文字内容放在.json文件中,index.js文件用于引用vue-i18n,并初始化一些基础设置:
3、编写两个语言版本的json文件:
en.json
{
"toolbar": {
"new" : "New",
"open" : "Open",
"save" : "Save",
"download" : "Download",
"about" : "About",
"github" : "Github"
}
}
zh.json
{
"toolbar": {
"new" : "新建",
"open" : "打开",
"save" : "保存",
"download" : "下载",
"about" : "关于",
"github" : "Github"
}
}
注意,json文件中要用双引号,单引号无效。
3、编写index.js
import Vue from 'vue'
import VueI18n from 'vue-i18n' //引入Vue-i18n
Vue.use(VueI18n) //引入语言资源文件
const locales = {
zh: require('./zh.json'),
en: require('./en.json'),
} //构建vuei18n实例,后面会export 这个实例
const i18n = new VueI18n({
locale: getDefaultLang(),
messages: locales,
}) //获取浏览器语言环境,截取lang的前2位字符,是因为浏览器语言返回值可能是:
//zh-cn Chinese(PRC)
//zh-tw Chinese(Taiwan Region)
//zh-hk Chinese(Hong Kong SAR, PRC)
//zh-sg Chinese(Singapore)
//en-us English(United States)
//en English
function getDefaultLang(){
let lang = navigator.language || navigator.userLanguage
lang = lang.substr(0, 2)
return lang
} //进行一些基础配置
export const setup = () => {
let lang = getDefaultLang() Object.keys(locales).forEach(lang => {
document.body.classList.remove(`lang-${lang}`)
})
document.body.classList.add(`lang-${lang}`)
document.body.setAttribute('lang', lang) Vue.config.lang = lang
i18n.locale = lang
}
4、装入VUE实例
import i18n from './assets/locales' new Vue({
el: '#app',
i18n,
render: h => h(App)
})
5、调用:
<div class="button new">
<i class="fas fa-layer-group"></i>
{{$t('toolbar.new')}}
</div>
这样完成了,运行结果:
本次工作,大量参考文章:https://segmentfault.com/a/1190000017762753 ,在此感谢作者分享如此优质内容,说不定他能感知到我的感恩:)。
整个项目在这个历史节点的代码,请到我的Github上查看:https://github.com/vularsoft/studio-ui
找到该历史节点的方法:
RXEditor是一个Boostrap代码可视化编辑工具,本系列记录了该软件的开发过程,有问题的朋友请在ithub上给我留言。
VUE实现Studio管理后台(三):支持多语言国际化(vue-i18n)的更多相关文章
- VUE实现Studio管理后台(二):Slot实现选项卡tab切换效果,可自由填装内容
作为RXEditor的主界面,Studio UI要使用大量的选项卡TAB切换,我梦想的TAB切换是可以自由填充内容的.可惜自己不会实现,只好在网上搜索一下,就跟现在你做的一样,看看有没有好事者实现了类 ...
- VUE实现Studio管理后台(七):树形结构,文件树,节点树共用一套代码NodeTree
本次介绍的内容,稍稍复杂了一点,用VUE实现树形结构.目前这个属性结构还没有编辑功能,仅仅是展示.明天再开一篇文章,介绍如何增加编辑功能,标题都想好了.先看今天的展示效果: 构建树必须用到递归,使用s ...
- VUE实现Studio管理后台(一):鼠标拖放改变窗口大小
近期改版RXEditor,把改版过程,用到的技术点,记录下来.昨天完成了静态页面的制作,制作过程并未详细记录,后期已经不愿再补了,有些遗憾.不过工作成果完整保留在github上,地址:https:// ...
- VUE实现Studio管理后台(九):开关(Switch)控件,输入框input系列
接下来几篇作文,会介绍用到的输入框系列,今天会介绍组普通的调用方式,因为RXEditor要求复杂的输入功能,后面的例子会用VUE的component动态调用,就没有今天的这么直观了,控件的实现原理都一 ...
- VUE实现Studio管理后台(十):OptionBox,一个综合属性输入界面,可以级联重置
为了便于阅读代码,已经把测试数据分离出来,放在了mock目录下: 阅读代码的话,稍微留意一下就好.本次介绍RXEditor界面最重要的部分,属性输入组件,该组件可以显示是否有数据被修改,还可以批量重置 ...
- VUE实现Studio管理后台(完结):标签式输入、名值对输入、对话框(modal dialog)
一周的时间,几乎每天都要工作十几个小时,敲代码+写作文,界面原型算是完成了,下一步是写内核的HTML处理引擎,纯JS实现.本次实战展示告一段落,等RXEditor下一个版本完成,再继续分享吧.剩下的功 ...
- VUE实现Studio管理后台(十三):按钮点选输入控件,input输入框系列
按钮点选输入,是一个非常简单的控件,20分钟就能完成的一个控件.先看效果: 根据以前的设定,通过json数据动态生成这两个按钮,示例中这两个按钮对应的json代码: { label:'标题', val ...
- 使用 PySide2 开发 Maya 插件系列三:qt语言国际化(internationalization)
使用 PySide2 开发 Maya 插件系列三:qt语言国际化(internationalization) 前言: 这是 qt for python 的语言国际化,基于 UI 的,python 也有 ...
- vue_shop(基于vue电商管理后台网站)
vue_shop 目录 vue_shop day01 实现登录功能 项目预开发处理 Login.vue完整代码: 处理步骤: 添加element-ui的表单组件 添加第三方字体: 添加表单验证 导入a ...
随机推荐
- js获取当前页面名称
// 取当前页面名称(不带后缀名) function pageName() { var a = location.href; var b = a.split("/"); var c ...
- 吴裕雄--天生自然python学习笔记:python 用pygame模块处理音频文件
除了对图片. Word 等普通格式的文件进行处理外, Python 还有强大的多媒体文件操作能力,如对音频.视频 文件的操作 . 如果要播放音乐,我们可以用 pygame 包中的 mixer 对 象. ...
- RPM包和YUM仓库管理
1.RPM包管理 RPMRPM Package Manger,前身Redhat Package Manger,由红帽开发用于软件包的安装升级卸载与查询有一个完整的数据库体系,每个RPM包的所有信息都固 ...
- locate及find查找命令
在文件系统上查找符合条件的文件: 实现工具:locate,find locate: 依赖于事先构建好的索引库: 系统自动实现(周期性任务): 手动更新数 ...
- FireWall2
配置防火墙步骤: 1.给接口配置ip,开 service-manage 服务 2.把接口画在zone区域 3.配置策略 4.服务器一定要开启服务 1. interface GigabitEtherne ...
- sqlserver中的数据导到mysql相关
一.在sqlserver中生成数据表脚本,粘贴到记事本中,如下语法要进行替换 1.int IDENTITY (1, 1) NOT NULL——>id int unsigned NOT NULL ...
- mysql索引详细介绍
博客: https://blog.csdn.net/tongdanping/article/details/79878302#%E4%B8%89%E3%80%81%E7%B4%A2%E5%BC%95% ...
- 1043 输出PATest (20 分)
题目:1043 输出PATest (20 分) 给定一个长度不超过 1 的.仅由英文字母构成的字符串.请将字符重新调整顺序,按 PATestPATest.... 这样的顺序输出,并忽略其它字符.当然, ...
- verilog求倒数-ROM实现方法
采用线性逼近法结合32段线性查找表的方式来实现1/z的计算. 首先将1/32-1/64的定点化数据存放到ROM中,ROM中存放的是扩大了2^20 次方的数字四舍五入后的整数部分.n值越大,精度越大,误 ...
- generate的使用verilog
根据项目设计的需要,要实例化多个类似的模块,这些类似的模块包括方波波形发生器,这几个模块基本相同,除了参数传递值不同,其他他部分都是相同的 具体实现代码如下: 此外有计数模块的例化,这个模块例化多个的 ...