vue实践---vue不依赖外部资源实现简单多语操作


Posted in Javascript onSeptember 21, 2020

vue使用多语,最常见的就是 vue-i18n, 但是如果开发中的多语很少,比如就不到10个多语,这样就没必要引入vue-i18n了, 引入了反正导致代码体积大了,这时候单纯用vue实现多语就是比较好的选择。

第一步

首先建立一个locales.js 存放多语语言包的内容,这里只写了 zh-CN, en这两种语言,其他还想新增的话 方法一样,代码如下:

export default {
 'zh-CN': {
 name: '我是中文名字'
 },
 'en': {
 name: 'I am English name'
 }
 }

第二步

通过浏览器的语言环境,获取对应的语言包,并吧语言包值付给 data 中的 locales

data () {
 return {
 locales: (() => {


// this.lang是父组件传递过来的, 这里的意思就是lang 优先使用父组件传递的语言,如果没有传递,就使用浏览器的语言(navigator.language)



const lang = this.lang || navigator.language
  let useLang = /^zh/.test(lang) ? 'zh-CN' : /^en/.test(lang) ? 'en' : lang
  // Object.keys 获取可枚举的属性 如果浏览器的语言不是英语 中文, 而且传递的lang参数也不是这两种之一,就默认使用 zh-CN
  if (!Object.keys(locales).includes(useLang)) useLang = 'zh-CN'
  return locales[useLang]
 })(),
 }
 },

这个locales最终返回的是一个对象,比如,如果是中文环境,返回的数据如下:

{
 name: '我是中文名字'
}

第三步

既然语言包都获取到了,还剩一个从语言包里面 获取对应key的方法:

methods: {
 $_t (key) {
  // this.locales就是上面那个对象
  let localeStr = this.locales[key]
  return localeStr
 }
 }

通过$_t这个方法,传入key,就可以获取到对应的value

总结&优化:

这样就实现了不用依赖vue-i18n这样的外部依赖,只使用vue就实现了多语;

$_t 这个方法可以放到 mixins 里面就避免了每次都要引入这个方法。

具体代码看这里: https://github.com/YalongYan/vue-practice/tree/master/vue-simple-multilingual

补充知识:vue-cli 打包(npm run build) 出现 ERROR in xx..js from UglifyJs Unexpected token: punc (()

之前打包还没问题,这次就报错了,后来发现原来是少了 .babelrc 文件, 网上找了好多方法都不行,后来看了之前的项目,原来是少了 .babelrc 文件, 只要在根目录下建立这个文件, 文件内容如下:

{
 "presets": [
 ["env", { "modules": false }],
 "stage-3"
 ]
}

文件位置看下图:

vue实践---vue不依赖外部资源实现简单多语操作

以上这篇vue实践---vue不依赖外部资源实现简单多语操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript执行效率与性能提升方案
Dec 21 Javascript
浅谈javascript的调试
Jan 28 Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 Javascript
js实现浮动在网页右侧的简洁QQ在线客服代码
Sep 04 Javascript
JS 获取HTML标签内的子节点的方法
Sep 21 Javascript
Vue组件创建和传值的方法
Aug 17 Javascript
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
JS监听事件的叠加和移除功能
Nov 19 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
一篇文章带你浅入webpack的DLL优化打包
Feb 20 Javascript
Vue中watch、computed、updated三者的区别及用法
Jul 27 Javascript
详解JVM系列之内存模型
Jun 10 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 #Javascript
微信小程序实现翻牌抽奖动画
Sep 21 #Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
Sep 21 #Javascript
微信小程序实现转盘抽奖
Sep 21 #Javascript
结合axios对项目中的api请求进行封装操作
Sep 21 #Javascript
微信小程序实现打卡签到页面
Sep 21 #Javascript
微信小程序实现签到弹窗动画
Sep 21 #Javascript
You might like
PHP安装攻略:常见问题解答(三)
2006/10/09 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
JS控件的生命周期介绍
2012/10/22 Javascript
关于js中alert弹出窗口文本换行问题简单详细说明
2012/12/11 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
使用原生js写的一个简单slider
2014/04/29 Javascript
node.js中的fs.symlinkSync方法使用说明
2014/12/15 Javascript
javascript将DOM节点添加到文档的方法实例分析
2015/08/04 Javascript
jQuery表单验证功能实例
2015/08/28 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
JS获取当前页面名称的简单实例
2016/08/19 Javascript
深入理解bootstrap框架之入门准备
2016/10/09 Javascript
jQuery实现遮罩层登录对话框
2016/12/29 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
浅谈JS获取元素的N种方法及其动静态讨论
2017/08/25 Javascript
Angularjs 1.3 中的$parse实例代码
2017/09/14 Javascript
jQuery实现点击DIV同时点击CheckBox,并为DIV上背景色的实例
2017/12/18 jQuery
vue使用原生swiper代码实例
2020/02/05 Javascript
ES6学习教程之Promise用法详解
2020/11/22 Javascript
在Mac下使用python实现简单的目录树展示方法
2018/11/01 Python
python实现两张图片的像素融合
2019/02/23 Python
Python 中 -m 的典型用法、原理解析与发展演变
2019/11/11 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
python两个_多个字典合并相加的实例代码
2019/12/26 Python
Python可以实现栈的结构吗
2020/05/27 Python
keras的backend 设置 tensorflow,theano操作
2020/06/30 Python
python报错: 'list' object has no attribute 'shape'的解决
2020/07/15 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
模范家庭事迹材料
2014/02/10 职场文书
期终自我鉴定
2014/02/17 职场文书
搞笑的获奖感言
2014/08/16 职场文书
党员四风问题对照检查材料
2014/09/27 职场文书
mysql字符串截取函数小结
2021/04/05 MySQL
Python爬虫之用Xpath获取关键标签实现自动评论盖楼抽奖(二)
2021/06/07 Python