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 相关文章推荐
javascript数组详解
Oct 22 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
javascript用函数实现对象的方法
May 14 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
Express URL跳转(重定向)的实现方法
Apr 07 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
Aug 29 Javascript
vuex 项目结构目录及一些简单配置介绍
Apr 08 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
Jul 06 Javascript
webpack4.x开发环境配置详解
Aug 04 Javascript
Vue入门之数量加减运算操作示例
Dec 11 Javascript
vue实现的网易云音乐在线播放和下载功能案例
Feb 18 Javascript
ant design vue中日期选择框混合时间选择器的用法说明
Oct 27 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 array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
PHP如何获取当前主机、域名、网址、路径、端口等参数
2017/06/09 PHP
利用php获得flv视频长度的实例代码
2017/10/26 PHP
Thinkphp5+uploadify实现的文件上传功能示例
2018/05/26 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
laravel 输出最后执行sql 附:whereIn的使用方法
2019/10/10 PHP
THREE.JS入门教程(4)创建粒子系统
2013/01/24 Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
2016/04/01 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
angularjs 实现带查找筛选功能的select下拉框实例
2017/01/11 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
jQuery实现弹窗居中效果类似alert()
2017/02/27 Javascript
微信小程序 图片加载(本地,网路)实例详解
2017/03/10 Javascript
AngularJS1.X学习笔记2-数据绑定详解
2017/04/01 Javascript
自定义PC微信扫码登录样式写法
2017/12/12 Javascript
webpack实用小功能介绍
2018/01/02 Javascript
详解axios中封装使用、拦截特定请求、判断所有请求加载完毕)
2019/04/09 Javascript
vue实现抖音时间转盘
2019/09/08 Javascript
[48:00]EG vs LGD 2018国际邀请赛淘汰赛BO3 第二场 8.26
2018/08/29 DOTA
[56:56]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.22
2019/09/05 DOTA
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
在win64上使用bypy进行百度网盘文件上传功能
2020/01/02 Python
Python使用configparser读取ini配置文件
2020/05/25 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
Python json格式化打印实现过程解析
2020/07/21 Python
利用简洁的图片预加载组件提升html5移动页面的用户体验
2016/03/11 HTML / CSS
详解HTML5中的picture元素响应式处理图片
2018/01/03 HTML / CSS
拓展培训心得体会
2014/01/04 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
西安导游词
2015/02/12 职场文书
党小组意见范文
2015/06/08 职场文书
2016年大学生党员承诺书
2016/03/24 职场文书
JavaScript实现显示和隐藏图片
2021/04/29 Javascript
nginx的zabbix 5.0安装部署的方法步骤
2021/07/16 Servers
pandas中关于apply+lambda的应用
2022/02/28 Python