八:Vue下的国际化处理
p { margin-bottom: 0.25cm; line-height: 120% }
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下的国际化处理
1:首先安装 Vue-i8n npm install vue-i18n --save 注:-save-dev是指将包信息添加到devDependencies,表示你开发时依赖的包裹. -save是指将 ...
- 初识ABP vNext(6):vue+ABP实现国际化
Tips:本篇已加入系列文章阅读目录,可点击查看更多相关文章. 目录 前言 开始 语言选项 语言切换 注意 最后 前言 上一篇介绍了ABP扩展实体,并且在前端部分新增了身份认证管理和租户管理的菜单,在 ...
- 基于Typescript的Vue项目配置国际化
基于Typescript的Vue项目配置国际化 简介 使用vue-i18n插件对基于Typescript的vue项目配置国际化,切换多种语言, 配合element-ui或者其他UI库 本文以配置中英文 ...
- vue 下实现 echarts 全国到省份的地图下钻
vue 下实现 echarts 全国到省份的地图下钻 项目地址:https://github.com/cag2050/vue_echarts_v3_demo
- Web标准:八、下拉及多级弹出菜单
Web标准:八.下拉及多级弹出菜单 知识点: 1.带下拉子菜单的导航菜单 2.绝对定位和浮动的区别和运用 3.CSS自适应宽度滑动门菜单 1)带下拉子菜单的导航菜单 带下拉子菜单的就是在一级导航下 ...
- checked、disabled在原生、jquery、vue下不同写法
以下是原生和jquery <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...
- 浅谈Vue下的components模板
浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...
- VUE(下)
VUE(下) VUE指令 表单指令 数据的双向指令 v-model = "变量" model绑定的变量,控制的是表单元素的value值 普通表单元素用v-model直接绑定控制va ...
- vue下实现input实现图片上传,压缩,拼接以及旋转
背景 作为一名前端工作人员,相信大家在开发系统的时候,经常有遇到需要这么一种需求,就是需要为用户保存上传的图片,很多小白遇到这个问题的时候,都会虎躯一震,以为会是一个棘手的问题,当你读完这篇文章的时候 ...
随机推荐
- 【CSS】 CSS的一些应用实例和参考
css 一些应用实例 基本抄自http://www.w3school.com.cn/css/css_align.asp ..把这些知识消化吸收然后以自己的话来解释一下 ■ 对齐 ● 用margin属 ...
- 设计模式之 外观模式详解(Service第三者插足,让action与dao分手)
作者:zuoxiaolong8810(左潇龙),转载请注明出处,特别说明:本博文来自博主原博客,为保证新博客中博文的完整性,特复制到此留存,如需转载请注明新博客地址即可. 各位好,LZ今天给各位分享一 ...
- attr与prop html与text
- echarts对每个data[i]的图片添加点击事件
1.综述:以饼图为例,只需要对echarts对象option添加以下几行代码即可 //添加点击事件(单击),还有其他鼠标事件和键盘事件等等 myChart1.on("click", ...
- vmware虚拟机和网络中的桥接和NAT
vmware虚拟机和网络中的桥接和NAT 有许多人在网上回答类似的问题,但大多说的不够简单,且互相抄袭的嫌疑很大,这里我尽自己努力把问题说的明白一些 首先解释一下什么是NAT(network addr ...
- hosts文件路径及文件介绍
路径:WINDOWS/system32/drivers/etc/hosts 内容127.0.0.1 localhost 一. Hosts文件的位置 很多用户都知道在Window系统中有个H ...
- c语言程序设计第6周编程作业一(分解质因数)
分解质因数 题目内容: 每个非素数(合数)都可以写成几个素数(也可称为质数)相乘的形式,这几个素数就都叫做这个合数的质因数.比如,6可以被分解为2x3,而24可以被分解为2x2x2x3. 现在,你的程 ...
- JavaScript(第八天)【时间与日期】
ECMAScript提供了Date类型来处理时间和日期.Date类型内置一系列获取和设置日期时间信息的方法. 一.Date类型 ECMAScript中的Date类型是在早期Java中java.util ...
- Rails + React +antd + Redux环境搭建
前提条件:node和ruby on rails必须已经安装好(相关安装流程不再此处介绍) 1.nvm.node 2.npm or yarn装一个就好 3.rvm.ruby on rails 4.for ...
- 学号:201621123032 《Java程序设计》第11周学习总结
1:本周学习总结 1.1.:以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2:书面作业 2.1.: 源代码阅读:多线程程序BounceThread 1.1: BallRunnable类有什 ...