1、安装

  

$ npm install vue-i18n

2、引入

import VueI18n from 'vue-i18n'
Vue.use(VueI18n) const i18n = new VueI18n({
locale: 'en-US', // 语言标识
//this.$i18n.locale // 通过切换locale的值来实现语言切换
messages: {
'zh-CN': require('./common/lang/zh'), // 中文语言包
'en-US': require('./common/lang/en') // 英文语言包
}
})

3、配置

en.js

module.exports = {
navList:{
home: "HOME",
task: "TASK CENTER",
login: "LOG IN",
switch: "EN"
}
} zh.js
module.exports = {
navList:{
home: "首页",
task: "任务中心",
login: "登录",
switch: "中文"
}
}

4、使用

{{$t('navList.home')}}

5、点击切换

export default {
name: 'index',
data(){
return {
headerlogo,
cMinH: 'auto',
obj:{
"zh-CN":1,
"en-US":2
}
}
},
created(){
let langSet = localStorage.getItem('langSet');
console.log('=>',langSet)
if (langSet in this.obj)
this.$i18n.locale = langSet console.log(document.documentElement.clientHeight)
this.cMinH = document.documentElement.clientHeight - 224 + 'px'
},
methods: {
clickNav(url) {
this.$router.push(url)
},
switchLang(){
console.log('switch',this.$i18n.locale=='zh-CN')
if (this.$i18n.locale=='zh-CN')
{
this.$i18n.locale='en-US'
localStorage.setItem("langSet","en-US")
}
else
{
this.$i18n.locale='zh-CN'
localStorage.setItem("langSet","zh-CN")
}
}
}
}

  

vue国际化插件的更多相关文章

  1. Vue国际化处理 vue-i18n 以及项目自动切换中英文

    1. 环境搭建 命令进入项目目录,执行以下命令安装vue 国际化插件vue-i18n npm install vue-i18n --save 2. 项目增加国际化翻译文件 在项目的src下添加lang ...

  2. vue-i18n国际化插件

    vue-i18n国际化插件 安装,到项目目录下执行:npm install vue-i18n 配置在src\main.js里面引入vue-i18n // 语言包插件import VueI18n fro ...

  3. 写一个Vue loading 插件

    什么是vue插件? 从功能上说,插件是为Vue添加全局功能的一种机制,比如给Vue添加一个全局组件,全局指令等: 从代码结构上说,插件就是一个必须拥有install方法的对象,这个方法的接收的第一个参 ...

  4. Vue自定义插件方法大全

    新年第一天首先祝大家新年快乐,心想事成! 1.利用根实例构造函数的原型 //在构造函数的原型链上添加自定义属性 Vue.prototype.test = 'pomelo' //在其他组件中调用 con ...

  5. vue各种插件汇总

    https://blog.csdn.net/wh8_2011/article/details/80497620(copy) Vue是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一 ...

  6. vue.js及项目实战[笔记]— 03 vue.js插件

    一. vue补充 1. 获取DOM元素 救命稻草,document.querySelector 在template中标示元素`ref = "xxx" 在要获取的时候,this.$r ...

  7. VUE图片懒加载-vue lazyload插件的简单使用

    序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...

  8. vue常用插件汇总

    UI-框架element - 饿了么出品的Vue2的web UI工具套件 mint-ui - Vue 2的移动UI元素 iview - 基于 Vuejs 的开源 UI 组件库 Keen-UI - 轻量 ...

  9. chrome浏览器的VUE调试插件Vue.js devtools

      chrome浏览器的VUE调试插件Vue.js devtools 应用商店直接安装 安装成功后在VUE文件打开可以直接调试: 提示效果如下: F12进入调试状态即可: 安装中出现的问题: 插件安装 ...

随机推荐

  1. 常用的jquery遍历函数

    1.Jquery遍历祖先 1).parent()  方法返回被选元素的直接父元素. 2).parents()  方法返回被选元素的所有祖先元素,它一路向上直到文档的根元素 (<html>) ...

  2. Linux pwn入门教程——CTF比赛

    Linux pwn入门教程(1)——栈溢出基础 from:https://zhuanlan.zhihu.com/p/38985585   0x00 函数的进入与返回 要想理解栈溢出,首先必须理解在汇编 ...

  3. “SecureCRT遇到一个致命的错误且必须关闭”处理办法

    打开SecureCRT时报错:SecureCRT遇到一个致命的错误且发须关闭.一个崩溃转储文件已创建于... 解决办法是,如下在cmd中输入regedit回车打开注册表编缉器 展开HKEY_LOCAL ...

  4. java下使用chromedriver获取访问页面状态码

    ##在使用chromedriver的时候 并没有提供api来获取访问页面的状态码,但是可以打开日志来获取到 LoggingPreferences logPrefs = new LoggingPrefe ...

  5. memory prefix inter,intra,intro,iso out 5

    1● inter 在~之间:相互   2● intra 3● iso 等 同   4● intro 向内,在内,内部  

  6. Oracle中如何停止正在执行SQL语句

    oracle的用P/SQL客户端中,如何停止正在执行的SQL语句? 我们使用oracle语句查询某个表时,如果查询的表数据太多,如何停止正在执行操作 如查询的表数据超过上万条时,如何停止查询操作

  7. 学习笔记-AngularJs (一)

    最近对AngularJs产生了浓厚的学习兴趣,于是便搜罗所有资料,开始学习起来,也希望把学习过程记录下来. 首先学习之前,需要对AngularJs进行个大概的了解: AngularJS[1]  诞生于 ...

  8. jdk重装后com.sun.tools.javac.Main is not on the classpath的问题 .

    在重装了JDk之后,在编译工程的时候出现如下错误: com.sun.tools.javac.Main is not on the classpath.Perhaps JAVA_HOME does no ...

  9. java高级⑴

    1.之前我们学过 数组: 数组的特点: 01. 长度一旦被定义,不允许被改变 02. 在内存中开辟一连串连续的空间! 那么现在有一个需求: 让我们定义一个数组 来 保存 新闻信息!!! 问题: 01. ...

  10. gulp安装和使用

    1.全局安装gulp:sudo npm install -g gulp 2.代码根目录:npm install 3.gulp 开始编译(在项目根目录下创建一个名为 gulpfile.js 的文件) 注 ...