当前位置:首页 > 编程教程 > vue技术文章 > vue解决使用webpack打包后keep-alive不生效的方法

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

  • 发布时间:
  • 作者:码农之家
  • 点击:127

这篇文章主要知识点是关于vue、webpack打包、keep-alive、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js v2.x 官方教程
  • 类型:Vue手册大小:5.11 MB格式:PDF作者:赵远航
立即下载

vue解决使用webpack打包后keep-alive不生效的方法

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

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

您可能感兴趣的文章:

  • webpack4.x下babel的安装、配置及使用的知识点总结
  • 基于webpack4从零开始构建react开发环境方法步骤详解
  • webpack多入口配置方法总结
  • 如何解决webpack配置打包后图片路径出错
  • 详解webpack4 升级迁移
  • 深入理解Vue Webpack2单元测试
  • webpack打包后调试的方法
  • 分享React 项目迁移 Webpack Babel7的实现
  • webpack打包过程中因为图片的路径导致的问题
  • Vue+ElementUI项目怎样使用webpack输出MPA
  • 相关电子书
    学习笔记

    Copyright 2018-2020 www.xz577.com 码农之家

    版权投诉 / 书籍推广 / 赞助:520161757@qq.com