vue实践---vue不依赖外部资源实现简单多语操作
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 Router中router.resolve方法使用实例
这篇文章主要给大家介绍了关于Vue Router中router.resolve方法使用的相关资料,router.resolve方法在前端路由库中用于解析路由信息,接受路径或路由对象,返回解析后的 URL、路由和位置对象,需要的朋友可以参考下2024-11-11
这篇文章主要为大家介绍了Vue的列表渲染，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助2021-11-11
下面小编就为大家整理了一篇解决vue打包项目后刷新404的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-03-03
这篇文章主要为大家介绍了详解Vue虚拟DOM如何提高前端开发效率,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-12-12![vue模块导入报错问题Module not found: Error:[CaseSensitivePathsPlugin]](//img.jbzj.com/images/xgimg/bcimg4.png)
vue模块导入报错问题Module not found: Error:[CaseSensi
这篇文章主要介绍了vue模块导入报错问题Module not found: Error:[CaseSensitivePathsPlugin]，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
vue+element多选级联选择器自定义props使用详解
这篇文章主要给大家介绍了关于vue+element多选级联选择器自定义props使用的相关资料,级联选择器展示的结果都是以数组的形式展示,也就是v-model绑定的结果,需要的朋友可以参考下2023-07-07
今天小编就为大家分享一篇使用vue根据状态添加列表数据和删除列表数据的实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
在Vue3.5版本中最大的改动就是响应式重构,重构后性能竟然炸裂的提升了56%,本文我们来讲讲使用双向链表后,Vue内部是如何实现依赖收集和依赖触发的,感兴趣的可以了解下2024-11-11
antd Vue实现Login登录页面布局案例详解 附带验证码验证功能
这篇文章主要介绍了antd Vue实现Login登录页面布局案例详解附带验证码验证功能,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
vant(ZanUi)结合async-validator实现表单验证的方法
这篇文章主要介绍了vant(ZanUi)结合async-validator实现表单验证的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-12
![vue模块导入报错问题Module not found: Error:[CaseSensitivePathsPlugin]](http://img.jbzj.com/images/xgimg/bcimg4.png)
最新评论