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下的国际化处理

    p { margin-bottom: 0.25cm; line-height: 120% } 1:首先安装 Vue-i8n npm install vue-i18n --save 注:-save-de ...

  2. 团队开发前端VUE项目代码规范

    团队开发前端VUE项目代码规范 2018年09月22日 20:18:11 我的小英短 阅读数 1658   一.规范目的: 统一编码风格,命名规范,注释要求,在团队协作中输出可读性强,易维护,风格一致 ...

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

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

  4. web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 ☝☝☝

    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程    web前端Vue+Django rest framework 框架 生鲜电商项目实战视频教程 学习 ...

  5. 前端Vue中常用rules校验规则

    前提 在 vue开发中,难免遇到各种表单校验,这里整理了网络上和自己平时高频率用到的一些校验方法.如果错误欢迎指出,后期不断补充更新. 1.是否合法IP地址 export function valid ...

  6. 浅谈Vue下的components模板

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

  7. 后端 SpringBoot + 前端 vue 打包发布到Tomcat

    近段时间 做了一些前后端的开发 需要在Tomcat里进行发布    把自己整理的分享出来 后端打包 pom.xml 文件 <packaging>war</packaging> ...

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

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

  9. web前端Vue+Django rest framework 框架 生鲜电商项目实战✍✍✍

    web前端Vue+Django rest framework 框架 生鲜电商项目实战  整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频 ...

随机推荐

  1. pip/pip3国内源

    Error 在使用pip3安装PySide2时出现ReadTimeoutError. $ pip3 install PySide2 Solution 使用国内源 例如: $ pip3 install ...

  2. 如何在docker和宿主机之间复制文件

    如何在docker和宿主机之间复制文件   最近在用Docker布署hadoop,要将文件上传到HDFS首先文件得在Docker容器中吧,网上提供的方法差不多有三种 1.用-v挂载主机数据卷到容器内  ...

  3. 关于框架搭建-web

    最近一直在学习前端相关的东西,在学了一堆基础可以以及动手在某个前端框架上写了一些东西之后,我想尝试着开始自己搭建一个框架.不知道时间需要多久,但会持续更新.小菜鸟的成长记录. ------------ ...

  4. 【1657: [蓝桥杯][算法训练VIP]】统计单词个数

    [链接] 我是链接,点我呀:) [题意] 题意 [题解] 设dp[i][j]表示前i个字符分成j个部分的最多匹配单词个数. 则dp[i][j] = dp[prei][j-1] + get_num(pr ...

  5. everyday two problems / 3.11 - 3.17

    7日共14题,因为3.14两题相同,所以实际总共13题 13道题分为难易两部分,没有按照时间顺序排列题目 A.易: 1.覆盖数字的数量 题意: 给出一段从A - B的区间S(A,B为整数) 这段区间内 ...

  6. RaspberryPi3安装CentOS7教程

    1.准备 Centos 7 AMR版镜像下载地址: http://mirror.centos.org/altarch/7/isos/armhfp/ 下载得到:CentOS-Userland-7-arm ...

  7. qwb VS 去污棒

    qwb VS 去污棒 Time Limit: 2 Sec  Memory Limit: 256 MB Description qwb表白学姐失败后,郁郁寡欢,整天坐在太阳底下赏月.在外人看来,他每天自 ...

  8. Python 7 列表 for 字典,嵌套

    列表: 基本格式:变量名 = [元素1,元素2,元素3] 创建:A = ['访客','admin',19]  或  A = list(['armin','admin',19]),  后者更倾向于转换为 ...

  9. Void 参数

    在C程序中如果在声明函数的时候如果没有任何参数那么需要将参数定义为void以此来限定此函数不可传递任何参数,如果不进行限定让参数表默认为空其意义是可以传递任何参数,这个问题的由来实际上是由于要兼容早期 ...

  10. sum求和类题目

    今天看到这道题目:http://www.cnblogs.com/charlesblc/p/5930311.html 题目地址:https://leetcode.com/problems/split-a ...