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下的国际化处理的更多相关文章

  1. 八:前端---Vue下的国际化处理

    1:首先安装 Vue-i8n npm install vue-i18n --save 注:-save-dev是指将包信息添加到devDependencies,表示你开发时依赖的包裹. -save是指将 ...

  2. 初识ABP vNext(6):vue+ABP实现国际化

    Tips:本篇已加入系列文章阅读目录,可点击查看更多相关文章. 目录 前言 开始 语言选项 语言切换 注意 最后 前言 上一篇介绍了ABP扩展实体,并且在前端部分新增了身份认证管理和租户管理的菜单,在 ...

  3. 基于Typescript的Vue项目配置国际化

    基于Typescript的Vue项目配置国际化 简介 使用vue-i18n插件对基于Typescript的vue项目配置国际化,切换多种语言, 配合element-ui或者其他UI库 本文以配置中英文 ...

  4. vue 下实现 echarts 全国到省份的地图下钻

    vue 下实现 echarts 全国到省份的地图下钻 项目地址:https://github.com/cag2050/vue_echarts_v3_demo

  5. Web标准:八、下拉及多级弹出菜单

    Web标准:八.下拉及多级弹出菜单 知识点: 1.带下拉子菜单的导航菜单 2.绝对定位和浮动的区别和运用 3.CSS自适应宽度滑动门菜单   1)带下拉子菜单的导航菜单 带下拉子菜单的就是在一级导航下 ...

  6. checked、disabled在原生、jquery、vue下不同写法

          以下是原生和jquery <!DOCTYPE html> <html> <head> <meta http-equiv="Content ...

  7. 浅谈Vue下的components模板

    浅谈Vue下的components模板在我们越来越深入Vue时,我们会发现我们对HTML代码的工程量会越来越少,今天我们来谈谈Vue下的 components模板的 初步使用方法与 应用 我们先来简单 ...

  8. VUE(下)

    VUE(下) VUE指令 表单指令 数据的双向指令 v-model = "变量" model绑定的变量,控制的是表单元素的value值 普通表单元素用v-model直接绑定控制va ...

  9. vue下实现input实现图片上传,压缩,拼接以及旋转

    背景 作为一名前端工作人员,相信大家在开发系统的时候,经常有遇到需要这么一种需求,就是需要为用户保存上传的图片,很多小白遇到这个问题的时候,都会虎躯一震,以为会是一个棘手的问题,当你读完这篇文章的时候 ...

随机推荐

  1. 【Python】 魔法方法

    魔法方法 这个名字真的很中二有没有 = =(或者说翻译气息太浓了,作为一个学外语的看到这种真是想吐槽的不行..) 从形式上来说,在方法的名字前后个加上两条下划线的就是魔法方法了 .从功能上说,所有魔法 ...

  2. 【Python】 零碎知识积累 I

    大概也是出于初高中时学化学,积累各种反应和物质的习惯,还有大学学各种外语时一看见不认识的词就马上记下来的习惯,形成了一种能记一点是一点的零碎知识记录的癖好.这篇文章就是专门拿来记录这些零碎知识的,没事 ...

  3. 如何使用一次for循环得到数组中第二大的数和第三大的数

    装载声明:http://blog.csdn.net/lxsmk9059/article/details/77920206?locationNum=1&fps=1 ,,,,,,,,}; ]; ] ...

  4. 设计模式 --> (6)原型模式

    原型(Prototype)模式 用原型实例指定创建对象的种类,并且通过拷贝这些原型创建新的对象. 原型模式是一种创建型设计模式,Prototype模式允许一个对象再创建另外一个可定制的对象,根本无需知 ...

  5. 使用listview空控件展示数据

    1.使用listview控件可以一次性的将有关的全部图像保存在控件中,建立集合图像. 图像列表控件的主要属性 属性                                           ...

  6. Python开发简单爬虫(二)---爬取百度百科页面数据

    一.开发爬虫的步骤 1.确定目标抓取策略: 打开目标页面,通过右键审查元素确定网页的url格式.数据格式.和网页编码形式. ①先看url的格式, F12观察一下链接的形式;② 再看目标文本信息的标签格 ...

  7. KS检验统计量的扩展应用(CMap)

    KS检验统计量的扩展应用 KS(Kolmogorov-Smirnov)检验是比较两个经验分布之间是否存在差异. 我们设X1, X2,-, Xm, Y1, Y2,-, Ym为两个独立随机样本,分别满足假 ...

  8. JavaScript(第九天)【正则表达式】

    假设用户需要在HTML表单中填写姓名.地址.出生日期等.那么在将表单提交到服务器进一步处理前,JavaScript程序会检查表单以确认用户确实输入了信息并且这些信息是符合要求的.   一.什么是正则表 ...

  9. 2018(上)C高级第0次作业

    一:已关注邹欣老师的博客,以及一些任课老师的博客. 二:新学期新气象,走过基础C语言的学习,转眼间来到了C语言的高级学习... 1.翻阅邹欣老师博客关于师生关系博客,并回答下列问题. (1)最理想的师 ...

  10. 实验三《Java面向对象程序设计》实验报告

    20162308 实验三<Java面向对象程序设计>实验报告 实验内容 XP基础 XP核心实践 IDEA工具学习 密码学算法基础 实验步骤 (一)Refactor/Reformat使用 p ...