八:前端---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下的国际化处理
p { margin-bottom: 0.25cm; line-height: 120% } 1:首先安装 Vue-i8n npm install vue-i18n --save 注:-save-de ...
- 团队开发前端VUE项目代码规范
团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658 一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致 ...
- 初识ABP vNext(6):vue+ABP实现国际化
Tips:本篇已加入系列文章阅读目录,可点击查看更多相关文章. 目录 前言 开始 语言选项 语言切换 注意 最后 前言 上一篇介绍了ABP扩展实体,并且在前端部分新增了身份认证管理和租户管理的菜单,在 ...
- web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 ☝☝☝
web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 ...
- 前端Vue中常用rules校验规则
前提 在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法.如果错误欢迎指出,后期不断补充更新. 1.是否合法IP地址 export function valid ...
- 浅谈Vue下的components模板
浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...
- 后端 SpringBoot + 前端 vue 打包发布到Tomcat
近段时间 做了一些前后端的开发 需要在Tomcat里进行发布 把自己整理的分享出来 后端打包 pom.xml 文件 <packaging>war</packaging> ...
- vue下实现input实现图片上传,压缩,拼接以及旋转
背景 作为一名前端工作人员,相信大家在开发系统的时候,经常有遇到需要这么一种需求,就是需要为用户保存上传的图片,很多小白遇到这个问题的时候,都会虎躯一震,以为会是一个棘手的问题,当你读完这篇文章的时候 ...
- web前端Vue+Django rest framework 框架 生鲜电商项目实战✍✍✍
web前端Vue+Django rest framework 框架 生鲜电商项目实战 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频 ...
随机推荐
- redis环境部署
运维开发技术交流群欢迎大家加入一起学习(QQ:722381733) 一.Redis服务介绍: redis简单来讲就是一个数据库,一个用来存储缓存的数据库容器,主要是让项目数据能写进缓存,为用户提搞更舒 ...
- 小白两篇博客熟练操作MySQL 之 第一篇
小白两篇博客熟悉操作MySQL 之 第一篇 一.概述 1. 什么是数据库? 答: 储存数据的仓库, 如: 在ATM的事例中创建的一个db 目录, 称为数据库 2. 什么是Mysql, Oracl ...
- Git 基础教程 之 标签
所谓标签:就是一个让人容易记住的有意义的名字,与某个commit绑在一起. 创建标签:①切回需要打标签的分支上 ② git tag <name> 默认标 ...
- 学习Android
=========================================today start to learn Android================= 我们学习需要的软件: jd ...
- hadoop在线退役datanode
退役dn2echo "dn2" >>excludes echo "dn2" >>yarn-excludes sh refresh-nam ...
- mysql 数据的某个范围数据
select * from table_name where limit num1, num2; num1 : 开始条目 num2 :选择数目
- mysql :=和=的区别
:=和=的区别 = 只有在set和update时才是和:=一样,赋值的作用,其它都是等于的作用.鉴于此,用变量实现行号时,必须用:= := 不只在set和update时时赋值的作用,在select也是 ...
- 络谷 P1363 幻想迷宫
P1363 幻想迷宫 题目描述 背景 Background (喵星人LHX和WD同心协力击退了汪星人的入侵,不幸的是,汪星人撤退之前给它们制造了一片幻象迷宫.) WD:呜呜,肿么办啊…… LHX:mo ...
- 读写锁(read-write lock)机制-----多线程同步问题的解决
原文: http://blog.chinaunix.net/uid-27177626-id-3791049.html ----------------------------------------- ...
- 微信小程序的小问题(2)
1.在小程序中,有时需要用到背景图片,但是如果使用background-image的话,就无法控制图片的大小,background-image一般用于将图片压缩为1像素的背景图片,然后自动填充铺满.使 ...