Vue下的国际化处理方法


Posted in Javascript onDecember 18, 2017

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下的国际化处理方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于JavaScript实现继承机制之原型链(prototype chaining)的详解
May 07 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
一个获取第n个元素节点的js函数
Sep 02 Javascript
jquery validate表单验证的基本用法入门
Jan 18 Javascript
jquery删除table当前行的实例代码
Oct 07 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
基于Bootstrap 3 JQuery及RegExp的表单验证功能
Feb 16 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
教你5分钟学会用requirejs(必看篇)
Jul 25 Javascript
vue中轮训器的使用
Jan 27 Javascript
vue中的v-if和v-show的区别详解
Sep 01 Javascript
js 数组当前行添加数据方法详解
Jul 28 Javascript
webpack多页面开发实践
Dec 18 #Javascript
Vue侧滑菜单组件——DrawerLayout
Dec 18 #Javascript
switchery按钮的使用方法
Dec 18 #Javascript
three.js实现3D影院的原理的代码分析
Dec 18 #Javascript
JS函数节流和函数防抖问题分析
Dec 18 #Javascript
vue 将页面公用的头部组件化的方法
Dec 18 #Javascript
浅谈使用React.setState需要注意的三点
Dec 18 #Javascript
You might like
PHP导出Excel实例讲解
2016/01/24 PHP
PHP+iframe图片上传实现即时刷新效果
2016/11/18 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
JSON 和 JavaScript eval使用说明
2010/06/13 Javascript
javascript克隆对象深度介绍
2012/11/20 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
2014/03/21 Javascript
node.js中的fs.ftruncate方法使用说明
2014/12/15 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
jquery实现网页的页面平滑滚动效果代码
2015/11/02 Javascript
seajs学习教程之基础篇
2016/10/20 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
jQuery使用DataTable实现删除数据后重新加载功能
2017/02/27 Javascript
使用Vue写一个datepicker的示例
2018/01/27 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
js 获取本周、上周、本月、上月、本季度、上季度的开始结束日期
2020/02/01 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
详解vue修改elementUI的分页组件视图没更新问题
2020/11/13 Javascript
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
用Python操作字符串之rindex()方法的使用
2015/05/19 Python
Python面向对象程序设计示例小结
2019/01/30 Python
Python OpenCV实现鼠标画框效果
2020/08/19 Python
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
韩国三星旗下的一家超市连锁店:Home Plus
2016/07/30 全球购物
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
英国经典球衣网站:Classic Football Shirts
2017/05/20 全球购物
京东全球售:直邮香港,澳门,台湾,美国,澳大利亚等地区
2017/09/24 全球购物
土木工程建筑专业毕业生求职信
2013/10/21 职场文书
《油菜花开了》教学反思
2014/02/22 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
优秀会计求职信
2014/07/04 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
用人单位聘用意向书
2015/05/11 职场文书
个人收入证明格式
2015/06/24 职场文书
营销策划分析:怎么策划才能更好销量产品?
2019/09/04 职场文书
浅析Python实现DFA算法
2021/06/26 Python