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 相关文章推荐
层序遍历在ExtJs的TreePanel中的应用
Oct 16 Javascript
利用jquery操作select下拉列表框的代码
Jun 04 Javascript
移动设备web开发首选框架:zeptojs介绍
Jan 29 Javascript
JS实现可拖曳、可关闭的弹窗效果
Sep 26 Javascript
Vue.js 插件开发详解
Mar 29 Javascript
vue开发调试神器vue-devtools使用详解
Jul 13 Javascript
ES6新特性:使用export和import实现模块化详解
Jul 31 Javascript
简单实现jquery隔行变色
Nov 09 jQuery
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
vue.js实现左边导航切换右边内容
Oct 21 Javascript
在vue中使用vuex,修改state的值示例
Nov 08 Javascript
javascript实现计算器功能详解流程
Nov 01 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
从康盛产品(discuz)提取出来的模板类
2011/06/28 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
初识PHP
2014/09/28 PHP
ThinkPHP安装和设置
2015/07/27 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
PDO::lastInsertId讲解
2019/01/29 PHP
详解php中生成标准uuid(guid)的方法
2019/04/28 PHP
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
轻量级 JS ToolTip提示效果
2010/07/20 Javascript
使用jQuery全局事件ajaxStart为特定请求实现提示效果的代码
2010/12/30 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
三种动态加载js的jquery实例代码另附去除js方法
2014/04/30 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
JS访问SWF的函数用法实例
2015/07/01 Javascript
window.onload使用指南
2015/09/13 Javascript
AngularJS中$watch和$timeout的使用示例
2016/09/20 Javascript
js实现的在线调色板功能完整实例
2016/12/21 Javascript
webpack4.0打包优化策略整理小结
2018/03/30 Javascript
JS使用栈判断给定字符串是否是回文算法示例
2019/03/04 Javascript
VueCli4项目配置反向代理proxy的方法步骤
2020/05/17 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
Python实现批量修改文件名实例
2015/07/08 Python
Python3网络爬虫之使用User Agent和代理IP隐藏身份
2017/11/23 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
Python OpenCV读取png图像转成jpg图像存储的方法
2018/10/28 Python
实时获取Python的print输出流方法
2019/01/07 Python
使用matplotlib绘制图例标签中带有公式的图
2019/12/13 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
html5 canvas-1.canvas介绍(hello canvas)
2013/01/07 HTML / CSS
数控专业推荐信范文
2013/12/02 职场文书
四风自我剖析材料思想汇报
2014/10/01 职场文书
年度考核个人总结
2015/03/06 职场文书
大学生求职信怎么写
2015/03/19 职场文书
Python turtle编写简单的球类小游戏
2022/03/31 Python
Mysql表数据比较大情况下修改添加字段的方法实例
2022/06/28 MySQL