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 相关文章推荐
json 定义
Jun 10 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
JavaScript闭包详解
Feb 02 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
纯js的右下角弹窗实例
Mar 12 Javascript
JS验证全角与半角及相互转化的介绍
May 18 Javascript
微信小程序dom操作的替代思路实例分析
Dec 06 Javascript
JavaScript遍历DOM元素的常见方式示例
Feb 16 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
Feb 11 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
深入分析jQuery.one() 函数
Jun 03 jQuery
Ant-design-vue Table组件customRow属性的使用说明
Oct 28 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教程之PHP中shell脚本的使用方法分享
2012/02/23 PHP
PHP常用设计模式之委托设计模式
2016/02/13 PHP
浅谈PHP的反射API
2017/02/26 PHP
laravel框架模型和数据库基础操作实例详解
2020/01/25 PHP
JavaScript实现表格排序方法
2013/06/14 Javascript
jQuery使用之设置元素样式用法实例
2015/01/19 Javascript
表单验证插件Validation应用的实例讲解
2015/10/10 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
jQuery实现带玻璃流光质感的手风琴特效
2015/11/20 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
vue父组件向子组件(props)传递数据的方法
2018/01/02 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
JavaScript中七种流行的开源机器学习框架
2018/10/11 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
零基础写python爬虫之抓取糗事百科代码分享
2014/11/06 Python
介绍Python中的文档测试模块
2015/04/28 Python
python图像处理之反色实现方法
2015/05/30 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
解决python 在for循环并且pop数组的时候会跳过某些元素的问题
2020/12/11 Python
CSS3支持IE6, 7, and 8的边框border属性
2012/12/28 HTML / CSS
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
大班幼儿评语大全
2014/04/30 职场文书
门卫岗位职责说明书
2014/08/18 职场文书
怎样写离婚协议书
2014/09/10 职场文书
司法局2014法制宣传日活动总结
2014/11/01 职场文书
苏州园林导游词
2015/02/03 职场文书
2019年幼儿园家长接送责任书
2019/10/29 职场文书
详解MySQL InnoDB存储引擎的内存管理
2021/04/08 MySQL
SONY AN-LP1 短波有源天线放大器
2021/04/22 无线电
Redis调用Lua脚本及使用场景快速掌握
2022/03/16 Redis
关于CSS自定义属性与前端页面的主题切换问题
2022/03/21 HTML / CSS
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android
Flink 侧流输出源码示例解析
2022/09/23 Servers