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. 理解JS中的this的指向

    原文地址:https://www.cnblogs.com/pssp/p/5216085.html#1 首先必须要说的是,this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到 ...

  2. 图解ActiveMQ virtual topic

    http://activemq.apache.org/virtual-destinations.html 普通的 topic 是发布/订阅模式:消息会被广播发送给所有的订阅者,订阅者拿到的是全部消息, ...

  3. 使用深度学习检测TOR流量——本质上是在利用报文的时序信息、传输速率建模

    from:https://www.jiqizhixin.com/articles/2018-08-11-11 可以通过分析流量包来检测TOR流量.这项分析可以在TOR 节点上进行,也可以在客户端和入口 ...

  4. 从此web开发so easy!

    ECharts (Enterprise Charts 商业产品图表库) 基于Canvas,纯Javascript图表库,提供直观,生动,可交互,可个性化定制的数据可视化图表.创新的拖拽重计算.数据视图 ...

  5. 解决libvlc_media_player_stop时死锁的方法

    转自:http://www.jiazi.cn/blog/?id=56 扩散该解决方法 最近需要使用VLC控件来做一个简单的流媒体播放器,在实施过程中,发现在调用libvlc_media_player_ ...

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

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

  7. Jquery如何禁止鼠标右键菜单

    jquery中使用contextmenu事件,如果返回true,则允许右键菜单:如果返回false,则禁止右键菜单 导入文件 <script type="text/javascript ...

  8. Spring @Scheduled @Async联合实现调度任务(2017.11.28更新)

    定时任务之前一直用的是quartz之类,但是注意到Spring中其实也提供了一种简单的调度注释@Scheduled,也就想尝一下鲜.. 代码示意如下: @Component @EnableSchedu ...

  9. 在shell脚本里执行sudo 命令

      可以 : echo "yourpasswd" |sudo -S yourcommand 但是不安全,因为密码都显示在shell脚本里面了-_- 引自http://hi.baid ...

  10. python settings :RROR 1130: Host 'XXXXXX' is not allowed to connect to this MySQL server

    pymysql.err.InternalError: (1130, u"Host '127.0.0.1' is not allowed to connect to this MySQL se ...