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 判断一个元素是否在页面中存在
Dec 27 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
js中的屏蔽的使用示例
Jul 30 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
javascript 面向对象实战思想分享
Sep 07 Javascript
Vue.js组件通信的几种姿势
Oct 23 Javascript
three.js实现3D视野缩放效果
Nov 16 Javascript
vue.js中created方法作用
Mar 30 Javascript
vue初始化动画加载的实例
Sep 01 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
JavaScript实现放大镜效果代码示例
Apr 29 Javascript
vue中keep-alive、activated的探讨和使用详解
Jul 26 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(视频)Http下载
2006/12/12 PHP
php fputcsv命令 写csv文件遇到的小问题(多维数组连接符)
2011/05/24 PHP
LotusPhp笔记之:Cookie组件的使用详解
2013/05/06 PHP
php基于dom实现读取图书xml格式数据的方法
2017/02/03 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
使用PHPExcel导出Excel表
2018/09/08 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
JavaScript delete 属性的使用
2009/10/08 Javascript
xheditor与validate插件冲突的解决方案
2010/04/15 Javascript
菜鸟javascript基础整理1
2010/12/06 Javascript
document.forms[].submit()使用介绍
2014/02/19 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
Boostrap入门准备之border box
2016/05/09 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
js HTML5上传示例代码完整版
2016/10/10 Javascript
jquery日历插件e-calendar升级版
2016/11/10 Javascript
Nodejs进阶:如何将图片转成datauri嵌入到网页中去实例
2016/11/21 NodeJs
微信小程序实现自定义picker选择器弹窗内容
2020/05/26 Javascript
基于openlayers实现角度测量功能
2020/09/28 Javascript
[04:42]2015国际邀请赛CDEC战队晋级之路
2015/08/13 DOTA
一则python3的简单爬虫代码
2014/05/26 Python
Python中__call__用法实例
2014/08/29 Python
Python编程之gui程序实现简单文件浏览器代码
2017/12/08 Python
django初始化数据库的实例
2018/05/27 Python
python 堆和优先队列的使用详解
2019/03/05 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
基于python实现的百度音乐下载器python pyqt改进版(附代码)
2019/08/05 Python
keras导入weights方式
2020/06/12 Python
html5定制表单_动力节点Java学院整理
2017/07/11 HTML / CSS
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
教师业务学习制度
2014/01/25 职场文书
迅雷Cued工作心得体会
2014/01/27 职场文书
20年同学聚会感言
2014/02/03 职场文书
银行开业庆典方案
2014/02/06 职场文书
2019最新激励员工口号大全!
2019/06/28 职场文书