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. Java基础笔记(1)----语言基础

    变量 变量:是内存中的一块存储空间,是存储数据的基本单元. 使用:先声明,后赋值,在使用. 声明:数据类型 + 变量名 = 值.(例:int a = 5:) 数据类型 分类:如图: 详解: Strin ...

  2. JavaScript(第十六天)【BOM基础】

      学习要点: 1.window对象 2.location对象 3.history对象 BOM也叫浏览器对象模型,它提供了很多对象,用于访问浏览器的功能.BOM缺少规范,每个浏览器提供商又按照自己想法 ...

  3. C语言——第七周作业

    题目 题目一:求交错序列前N项和 1.实验代码 #include <stdio.h> int main() { int n , i , b ; , a , c ; scanf(" ...

  4. 20145237 实验五《Java网络编程》

    20145237 实验五<Java网络编程> 一.实验内容 •1.运行下载的TCP代码,结对进行,一人服务器,一人客户端: •2.利用加解密代码包,编译运行代码,一人加密,一人解密: •3 ...

  5. Java代码风格和在idea中的一些设置

    源文件基本设置 1. 文件名 驼峰标识,.java结尾 2. 编码 统一为UTF-8 Transport...可以解决property文件不能正常显示为中文的问题 3. 特殊字符 尽量使用转义字符(\ ...

  6. 使用ArrayList时代码内部发生了什么(jdk1.7)?

    前言 ArrayList(这里的ArrayList是基于jdk1.7)是在项目中经常使用的集合类,例如我们从数据库中查询出一组数据.这篇文章不去剖析它的继承和实现,只是让我们知道实例化及增删改查时它的 ...

  7. V7000数据恢复(存储文件系统损坏)案例_北亚数据恢复

    我们今天介绍的数据恢复案例是一起 v7000存储文件系统损坏导致的数据丢失,首先简单介绍一下设备基本情况:发生文件系统损坏的是一台挂载在Windows2003服务器上的v7000存储,划分了一个容量为 ...

  8. JAVA_SE基础——53.什么是异常?

    尽管人人都希望自己的身体健康,处理事情都能顺利进行, 但是在实际生活中总会遇到各种状况,比如,感冒发烧,电脑突然蓝屏死机等..程序也一样,程序在运行过程中,也会发生各种非正常状况,比如程序运行时磁盘不 ...

  9. GIT入门笔记(20)- 使用eclipse 基于 git 开发过程梳理

    一.创建本地分支 1.下载/更新 本地 主干 如果本地还没有 本地主干,下载:git clone 如果本地已有了 本地主干,更新:git pull 工程右键菜单:team -> pull 2.基 ...

  10. api-gateway实践(06)新服务网关 - 请求监控

    一.实时监控 用户点击服务实例,系统显示服务实例-version下的api列表, 用户点击某个api的如下两个图标 1.API请求次数监控 横轴:时间,粒度为分钟 纵轴:请求访问次数 展示:失败数(红 ...