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 相关文章推荐
在chrome中window.onload事件的一些问题
Mar 01 Javascript
jQuery登陆判断简单实现代码
Apr 21 Javascript
js创建元素(节点)示例
Jan 02 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
JS实现将数字金额转换为大写人民币汉字的方法
Aug 02 Javascript
JS DOMReady事件的六种实现方法总结
Nov 23 Javascript
webpack学习笔记之优化缓存、合并、懒加载
Aug 24 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
详解JS中的this、apply、call、bind(经典面试题)
Sep 19 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
Dec 09 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
vue实现PC端录音功能的实例代码
Jun 05 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获取文件夹内文件数的方法
2015/03/12 PHP
PHP环境中Memcache的安装和使用
2015/11/05 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
thinkphp框架page类与bootstrap分页(美化)
2017/06/25 PHP
PHP单例模式模拟Java Bean实现方法示例
2018/12/07 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
animate动画示例(泪奔的小孩)及stop和delay的使用
2013/05/06 Javascript
JS验证控制输入中英文字节长度(input、textarea等)具体实例
2013/06/21 Javascript
js获取html文件的思路及示例
2013/09/17 Javascript
基于javascript如何传递特殊字符
2015/11/30 Javascript
浅谈JavaScript中面向对象的的深拷贝和浅拷贝
2016/08/01 Javascript
jQuery Ajax请求后台数据并在前台接收
2016/12/10 Javascript
详解用webpack2.0构建vue2.0超详细精简版
2017/04/05 Javascript
angularJs中datatable实现代码
2017/06/03 Javascript
JavaScript30 一个月纯 JS 挑战中文指南(英文全集)
2017/07/23 Javascript
node跨域请求方法小结
2017/08/25 Javascript
mint-ui在vue中的使用示例
2018/04/05 Javascript
Vue+Vuex实现自动登录的知识点详解
2020/03/04 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
python对list中的每个元素进行某种操作的方法
2018/06/29 Python
python实现朴素贝叶斯算法
2018/11/19 Python
Python图像处理实现两幅图像合成一幅图像的方法【测试可用】
2019/01/04 Python
Python3 max()函数基础用法
2019/02/19 Python
Python项目 基于Scapy实现SYN泛洪攻击的方法
2019/07/23 Python
python编写猜数字小游戏
2019/10/06 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
python GUI库图形界面开发之PyQt5结合Qt Designer创建信号与槽的详细方法与实例
2020/03/08 Python
利用pipenv和pyenv管理多个相互独立的Python虚拟开发环境
2020/11/01 Python
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
Hunter Boots美国官方网站:赫特威灵顿雨靴
2018/06/16 全球购物
领导班子三严三实对照检查材料
2014/09/25 职场文书
docker 制作mysql镜像并自动安装
2022/05/20 Servers