Vue下的国际化处理方法
更新时间：2017年12月18日 14:00:53 作者：弋淼女孩
下面小编就为大家分享一篇Vue下的国际化处理方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
1：首先安装 Vue-i8n
npm install vue-i18n --save
注：-save-dev是指将包信息添加到devDependencies，表示你开发时依赖的包裹。 -save是指将包信息添加到dependencies，表示你发布时依赖的包裹。
2：在main.js中配置信息
import VueI18n from 'vue-i18n'
import {getCookie} from './common/cookie' //引入一个js文件，使用引入的函数getCookie，根据当前缓存切换语言
Vue.use(VueI18n)
const i18n = new VueI18n({
locale: getCookie('PLAY_LANG','cn-zh'), //根据当前语言切换
messages: {
'cn-zh': require('./language/cn-zh'), //中文语言包
'en-us': require('./language/en-us') //英文语言包
}
})
new Vue({
el: '#app',
i18n, // 不要忘记
router,
template: '<App/>',
components: { App }
})
3：在目录src下新建一个language文件，尽可能与main.js同级存放，添加两个js文件，cn-zh和en-us，存放需要翻译的语言
4：getCookie函数
function getCookie(name,defaultValue) {
var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)"); //"(^| )" 匹配开头和空格
if (arr = document.cookie.match(reg))
return unescape(arr[2]);
else
return defaultValue;
}
export {
getCookie
}
以上这篇Vue下的国际化处理方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在本篇文章里小编给大家整理的是关于vue的keep-alive用法技巧以及实例代码，需要的朋友们学习下。2019-08-08
双向数据绑定原理主要运用了发布订阅模式来实现的，通过Object.defineProperty对数据劫持，触发getter，setter方法，这篇文章主要介绍了vue2.x双向数据绑定原理,需要的朋友可以参考下2023-02-02
这篇文章主要为大家介绍了vue前端实现打印下载示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-08-08
这篇文章主要介绍了vue3 使用setup语法糖实现分类管理,本次模块使用 vue3+element-plus 实现一个新闻站的后台分类管理模块，其中新增、编辑采用对话框方式公用一个表单，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue中@change兼容问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-10-10
vue循环中调用接口-promise.all();按顺序执行异步处理方式
这篇文章主要介绍了vue循环中调用接口-promise.all();按顺序执行异步处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-07-07
这篇文章主要介绍了electron踩坑之dialog中的callback解决，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-10-10
这篇文章主要为大家详细介绍了Vue标尺插件的使用方法，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了vue中vue-cli项目报错sockjs.js报错问题，具有很好的参考价值，希望对大家有所帮助。2022-12-12
这篇文章主要介绍了antd vue v-decorator的取值与赋值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
最新评论