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 相关文章推荐
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
JS实现的竖向折叠菜单代码
Oct 21 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
jQuery插件之validation插件
Mar 29 jQuery
Bootstrap布局之栅格系统学习笔记
May 04 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
VUE2 前端实现 静态二级省市联动选择select的示例
Feb 09 Javascript
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
JS实现秒杀倒计时特效
Jan 02 Javascript
vue+element-ui表格封装tag标签使用插槽
Jun 18 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
ajax php 实现写入数据库
2009/09/02 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
thinkphp中空模板与空模块的用法实例
2014/11/26 PHP
浅谈PHP命令执行php文件需要注意的问题
2016/12/16 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
php注册审核重点解析(数据访问)
2017/05/23 PHP
jquery ui bootstrap 实现自定义风格
2014/11/14 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
jQuery选择器源码解读(二):select方法
2015/03/31 Javascript
Js数组排序函数sort()介绍
2015/06/08 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
微信小程序中的onLoad详解及简单实例
2017/04/05 Javascript
Node.JS文件系统解析实例详解
2017/05/15 Javascript
VueJs组件prop验证简单介绍
2017/09/12 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
基于Angular中ng-controller父子级嵌套的相关属性详解
2018/10/08 Javascript
微信小程序可滑动月日历组件使用详解
2019/10/21 Javascript
Python实现的概率分布运算操作示例
2017/08/14 Python
python爬虫headers设置后无效的解决方法
2017/10/21 Python
tensorflow识别自己手写数字
2018/03/14 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
Django数据库类库MySQLdb使用详解
2019/04/28 Python
python3 property装饰器实现原理与用法示例
2019/05/15 Python
Python实用工具FuckIt.py介绍
2019/07/02 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Python实现电视里的5毛特效实例代码详解
2020/05/15 Python
Python3中FuzzyWuzzy库实例用法
2020/11/18 Python
python使用Windows的wmic命令监控文件运行状况,如有异常发送邮件报警
2021/01/30 Python
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
酒店优秀员工事迹材料
2014/06/02 职场文书
客运企业隐患排查工作方案
2014/06/06 职场文书
校长师德表现自我评价
2015/03/04 职场文书
党内外群众意见范文
2015/06/02 职场文书
运动会800米赞词
2015/07/22 职场文书
Python安装使用Scrapy框架
2022/04/12 Python