当前位置：主页 > vue.js教程 >

vue使用webpack打包后keep-alive不生效

  • 更新时间：2020-07-14 09:36:58
  • 编辑：衡景胜

问题是这样的，我使用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不生效的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持码农之家。

相关教程

  • webpack4.x下babel的安装、配置及使用的知识点总结

    这篇文章主要介绍了webpack4.x下babel的安装、配置及使用详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

    发布时间：2020-02-09

  • 基于webpack4从零开始构建react开发环境方法步骤详解

    这篇文章主要介绍了详解如何用webpack4从零开始构建react开发环境，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2020-01-16

  • webpack多入口配置方法总结

    本篇文章主要介绍了webpack 多入口配置 ，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2020-01-03

  • 如何解决webpack配置打包后图片路径出错

    本篇文章主要介绍了webpack配置打包后图片路径出错的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2019-12-18

  • 详解webpack4 升级迁移

    这篇文章主要介绍了webpack 4 升级迁移的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2020-01-15

  • 深入理解Vue Webpack2单元测试

    这篇文章主要给大家介绍了关于Vue Webpack2单元测试的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面跟着小编来一起学习学习

    发布时间：2020-02-05

  • webpack打包后调试的方法

    这篇文章主要介绍了详解webpack打包后如何调试的方法步骤,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2019-12-07

  • 分享React 项目迁移 Webpack Babel7的实现

    这篇文章主要介绍了React 项目迁移 Webpack Babel7的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

    发布时间：2020-02-04

  • webpack打包过程中因为图片的路径导致的问题

    这篇文章主要介绍了webpack踩坑之路图片的路径与打包，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

    发布时间：2020-03-09

  • Vue+ElementUI项目怎样使用webpack输出MPA

    这篇文章主要介绍了Vue+ElementUI项目使用webpack输出MPA的方法，本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

    发布时间：2020-02-04

  • Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统

    Spring Boot+Spring Cloud+Vue+Element项目实战：手把手教你开发权限管理系统

    本书从项目实践出发，手把手、心贴心地带领读者从零开始，一步一步地开发出功能相对完整的权限管理系统，从而深入掌握当前主流的Spring Boot + Spring Cloud + Vue前后端集成开发技术。 全书分为三篇共32章。第一篇为系统介绍篇，对系统的功能、架构和界面进行介绍，对系统的安装运行给出指南，对涉及的关键技术进行简单介绍。第二篇为后端实现篇，从数据库设计和搭建开发环境开始，全面细致地讲解权限管理系统的后端实现全过程。第三篇为前端实现

    大小：132979 MB 项目实战

  • JavaScript+Vue+React全程实例

    JavaScript+Vue+React全程实例

    这书根据基础知识与开发实践活动紧密结合的观念，选萃当今简易、好用和时兴的百余个JavaScript编码案例，协助阅读者学习培训把握JavaScript开发语言。本书內容详实、重中之重突显、浅显易懂，包含了JavaScript前端开发开发的各个方面。

    大小：59150 MB MJS实例

  • Vue企业开发实战

    Vue企业开发实战

    本书以Vue.js 2为基础，以项目实战的方式引导读者渐进式学习Vue.js框架。本书分为项目起步、Vue.js介绍、项目插件、项目梳理等部分。

    大小：109.6 MBVue.js实战电子书

  • Spring Boot+Vue全栈开发实战

    Spring Boot+Vue全栈开发实战

    传统的JavaEE开发效率低下、配置臃肿、调试不便，严重制约了程序员的生产力。Spring Boot致力于简化开发配置，并为企业级开发提供一系列非业务性功能；而Vue则采用数据驱动视图的方式将程序

    大小：196.3 MBSpring电子书

  • 水晶石技法VUE 10完全学习手册

    水晶石技法VUE 10完全学习手册

    《水晶石技法 VUE 10完全学习手册》共14章，以实例为主，共提供了50多个制作实例。第1～3章对VUE进行了总体介绍。第4～12章通过大量的实例，分别介绍了VUE的各个功能模块，包括大气、材质、地形、生态系统、函数、动画、渲染，以及VUE和其他软件的结合使用(比如，3ds Max、Poser等)。第13章安排了两个综合实例，让读者在较为全面地了解了VUE的功能之后，综合使用各个知识点来完成更为大型的实例。在本书最后的第14章中，列出了VUE使用过程中的一些常见

    大小：114191 MB VUE10学习手册

用户留言

发布评论

最新更新

热门推荐