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. 计时器setInterval()-慕课网

    计时器setInterval() 在执行时,从载入页面后每隔指定的时间执行代码. 语法: setInterval(代码,交互时间); 参数说明: 1. 代码:要调用的函数或要执行的代码串. 2. 交互 ...

  2. 光环国际联合阿里云推出“AI智客计划”

    2018阿里巴巴云栖大会深圳峰会3月28日.29日在大中华喜来登酒店举行,阿里云全面展示智能城市.智能汽车.智能生活.智能制造等产业创新. 3月28日下午,以"深化产教融合,科技赋能育人才& ...

  3. Vim编辑器的注释,解注,删除与恢复

    1. 注释: 将光标移动到注释首部 命令模式下 Ctrl+V,进入列模式 上下移动,选中待注释内容 按大写I,进入插入模式 输入 // or # 按两次退出 2 解注 将光标移动到待解注首部 命令模式 ...

  4. ECEF和大地坐标系的相互转化

    在阅读 RTKLIB的源码时,发现了ECEF和大地坐标系的相互转换的函数,大地坐标系(φ,λ,h)转成ECEF(X,Y,Z)与所看书籍(GPS原理与接收机,谢刚,电子工业出版社)的公式是一样的,而EC ...

  5. 张旭升20162329 2006-2007-2 《Java程序设计》第一周学习总结

    20162329 2006-2007-2 <Java程序设计>第一周学习总结 教材学习内容总结 通过打书上的代码熟悉了Java编程的基本过程 教材学习中的问题和解决过程 1.因为我的虚拟机 ...

  6. python网络爬虫,知识储备,简单爬虫的必知必会,【核心】

    知识储备,简单爬虫的必知必会,[核心] 一.实验说明 1. 环境登录 无需密码自动登录,系统用户名shiyanlou 2. 环境介绍 本实验环境采用带桌面的Ubuntu Linux环境,实验中会用到桌 ...

  7. 第八条:覆盖equals时请遵守通用约定

    ==是物理相等 equals是逻辑相等 因为每个类的实例对象本质上都是唯一的 ,利用物理相等(==)是指一个实例只能相等于它自己. 利用逻辑相等是(equals)指 一个实例是否和另一个实例的某些关键 ...

  8. 一句话了解JAVA与大数据之间的关系

    大数据无疑是目前IT领域的最受关注的热词之一.几乎凡事都要挂上点大数据,否则就显得你OUT了.如果再找一个可以跟大数据并驾齐驱的IT热词,JAVA无疑是跟大数据并驾齐驱的一个词语.很多人在提到大数据的 ...

  9. nyoj 移位密码

    移位密码 时间限制:1000 ms  |  内存限制:65535 KB 难度:0   描述 移位密码是最简单的一类代替密码,具体算法就是将字母表的字母右移k个位置(k<26),并对字母表长度作模 ...

  10. 记一下webstorm快键键

    #####新建文件````ctrl+alt+insert````#####结构速写````div>ul>li*4>p | div>h1+p | input:text | div ...