vue解决使用webpack打包后keep-alive不生效的方法


Posted in Javascript onSeptember 01, 2018

问题是这样的,我使用webpack的npm run dev运行的时候,keep-alive路由缓存是有效的,但是我npm run build,把文件放到实际的项目中去的时候,会有如下的问题:

路由如下:

var menus = [
 {
  path: '/user',
  name: '用户',
  component: '/user',
  redirect: '/user/index1',
  icon: 'fa-bandcamp',
  meta: {
   keepAlive: false
  },
  children: [
   { path: 'index1', component: '/user/index1', name: '用户管理1', meta: {keepAlive: true}},
   { path: 'index2', component: '/user/index2', name: '用户管理2', meta: {keepAlive: true}},
  ]
 },{
  path: '/system',
  name: 'system',
  component: '/system',
  redirect: '/system/index',
  icon: 'fa-superpowers',
  noDropdown: true,
  meta: {
   keepAlive: false
  },
  children: [
   { path: 'index', component: '/system/index', name: '系统管理', meta: {keepAlive: true}},
  ]
 },
]

我在 /user/index1 和/user/index2 之间做切换的时候路由缓存还是生效的,但是在user和system之间切换的时候就不生效了,解决方法如下,也解释不清楚什么原因,可能生产环境下需要在路由的文件上面做缓存把

在route目录下新建两个文件:

_import_development.js

module.exports = file => require('@/views/' + file + '.vue')

_import_production.js

module.exports = file => () => import('@/views/' + file + '.vue')

原先路由import的时候是这样的:

import Home from '@/views/home/homeView'

现在改成这样:

const _import = require('./_import_' + process.env.NODE_ENV);
const Login = _import('index/loginView')

重新打包运行生效!

以上这篇vue解决使用webpack打包后keep-alive不生效的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
Jquery插件之多图片异步上传
Oct 20 Javascript
通过length属性判断jquery对象是否存在
Oct 18 Javascript
js replace替换所有匹配的字符串
Feb 13 Javascript
javascript判断是手机还是电脑访问网页的简单实例分享
Jun 03 Javascript
浅析JavaScript中的事件机制
Jun 04 Javascript
异步JavaScript编程中的Promise使用方法
Jul 28 Javascript
JavaScript动态设置div的样式的方法
Dec 26 Javascript
Jquery操作cookie记住用户名
Mar 29 Javascript
jQuery实现选项卡功能(两种方法)
Mar 08 Javascript
Vue CLI 3搭建vue+vuex最全分析(推荐)
Sep 27 Javascript
Echart折线图手柄触发事件示例详解
Dec 16 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
Sep 01 #Javascript
JS与jQuery判断文本框还剩多少字符可以输入的方法
Sep 01 #jQuery
vue初始化动画加载的实例
Sep 01 #Javascript
jQuery解析json格式数据示例
Sep 01 #jQuery
vue+vue-router转场动画的实例代码
Sep 01 #Javascript
Vue-router 切换组件页面时进入进出动画方法
Sep 01 #Javascript
vue 实现在函数中触发路由跳转的示例
Sep 01 #Javascript
You might like
CodeIgniter配置之SESSION用法实例分析
2016/01/19 PHP
ThinkPHP3.2.3实现分页的方法详解
2016/06/03 PHP
Nigma vs Liquid BO3 第二场2.14
2021/03/10 DOTA
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
IE6与IE7中,innerHTML获取param的区别
2009/03/15 Javascript
js对象的构造和继承实现代码
2010/12/05 Javascript
Extjs显示从数据库取出时间转换JSON后的出现问题
2012/11/20 Javascript
怎样在JavaScript里写一个swing把数据插入数据库
2012/12/10 Javascript
iframe实用操作锦集
2014/04/22 Javascript
js使用setTimeout实现定时炸弹的方法
2015/04/10 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
2015/09/16 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
js小数运算出现多位小数如何解决
2015/10/08 Javascript
使用HTML5+Boostrap打造简单的音乐播放器
2016/08/05 Javascript
jQuery替换节点用法示例(使用replaceWith方法)
2016/09/08 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
2016/11/25 Javascript
图片懒加载插件实例分享(含解析)
2017/01/09 Javascript
实例分析JS与Node.js中的事件循环
2017/12/12 Javascript
vue获取时间戳转换为日期格式代码实例
2019/04/17 Javascript
优雅的处理vue项目异常实战记录
2019/06/05 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
2019/06/18 Javascript
node.js 微信开发之定时获取access_token
2020/02/07 Javascript
Postman如何实现参数化执行及断言处理
2020/07/28 Javascript
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
python使用Plotly绘图工具绘制柱状图
2019/04/01 Python
pip指定python位置安装软件包的方法
2019/07/12 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
Django CBV类的用法详解
2019/07/26 Python
在python中修改.properties文件的操作
2020/04/08 Python
解决Jupyter Notebook使用parser.parse_args出现错误问题
2020/04/20 Python
北欧最好的童装网上商店:Babyshop
2019/09/15 全球购物
100%羊绒:NakedCashmere
2020/08/26 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
励志语录:时光飞逝,请学会珍惜所有的人和事
2020/01/16 职场文书
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python