Vue解决Webpack打包后keep-alive不生效的问题

Vue 项目打包后,突然不生效?这坑蛮常见的,尤其用 Webpack 配合懒加载时,真挺容易踩雷。简单来说,需要知道你要缓存哪个组件,但 Webpack 打包时把路由组件按需分割了,变成异步加载,导致抓不到具体组件信息,缓存失败啦。

思路其实也不复杂:在路由配置里用meta加个keepAlive: true标记,再用包一下,配合v-if筛一筛,哪些需要缓存就留着,不需要的就放过。

还有个小技巧,蛮实用的:在_import_development.js_import_production.js里做环境区分,开发时用require同步引入,生产时用import()异步引入,这样开发和打包两边行为一致,省心多了。

如果你也遇到类似问题,不妨试试这个套路,能省不少排查时间。

pdf 文件大小:36.49KB