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 相关文章推荐
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
js 距离某一时间点时间是多少实现代码
Oct 14 Javascript
基于jquery实现可定制的web在线富文本编辑器附源码下载
Nov 17 Javascript
原生js实现放大镜
Feb 20 Javascript
jQuery获取单选按钮radio选中值与去除所有radio选中状态的方法
May 20 jQuery
vue.js-div滚动条隐藏但有滚动效果的实现方法
Mar 03 Javascript
ES6 中可以提升幸福度的小功能
Aug 06 Javascript
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
vue2.x 通过后端接口代理,获取qq音乐api的数据示例
Oct 30 Javascript
JavaScript定时器使用方法详解
Mar 26 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 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
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
Laravel中10个有用的用法小结
2019/05/06 PHP
laravel7学习之无限级分类的最新实现方法
2020/09/30 PHP
JS 图片缩放效果代码
2010/06/09 Javascript
js原型链原理看图说明
2012/07/07 Javascript
中止javascript执行的方法
2014/02/14 Javascript
jquery自动将form表单封装成json的具体实现
2014/03/17 Javascript
js预加载图片方法汇总
2015/06/15 Javascript
bootstrap laydate日期组件使用详解
2017/01/04 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
Vue.js实现一个todo-list的上移下移删除功能
2017/06/26 Javascript
canvas基础绘制-绚丽倒计时的实例
2017/09/17 Javascript
Vuex 进阶之模块化组织详解
2018/01/12 Javascript
超轻量级的js时间库miment使用解析
2019/08/02 Javascript
vue中watch和computed为什么能监听到数据的改变以及不同之处
2019/12/27 Javascript
python 判断自定义对象类型
2009/03/21 Python
在Python中操作文件之seek()方法的使用教程
2015/05/24 Python
Python编程实现粒子群算法(PSO)详解
2017/11/13 Python
PyQt5每天必学之滑块控件QSlider
2018/04/20 Python
对Python生成汉字字库文字,以及转换为文字图片的实例详解
2019/01/29 Python
完美解决Python matplotlib绘图时汉字显示不正常的问题
2019/01/29 Python
Python学习笔记基本数据结构之序列类型list tuple range用法分析
2019/06/08 Python
基于Python中isfile函数和isdir函数使用详解
2019/11/29 Python
Pytorch maxpool的ceil_mode用法
2020/02/18 Python
python IDLE添加行号显示教程
2020/04/25 Python
一款css实现的鼠标经过按钮的特效
2014/09/11 HTML / CSS
纯CSS3实现圆圈动态发光特效动画的示例代码
2021/03/08 HTML / CSS
HTML5之SVG 2D入门9—蒙板及mask元素介绍与应用
2013/01/30 HTML / CSS
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
玛蒂尔达简服装:Matilda Jane Clothing
2019/02/13 全球购物
英国家喻户晓的家居商店:The Range
2019/03/25 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
我的中国心演讲稿
2014/09/04 职场文书
python用tkinter开发的扫雷游戏
2021/06/01 Python
详解java如何集成swagger组件
2021/06/21 Java/Android
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电