问题发现
开发过程中运用了vue-cli3.0 构建vue+typescript的环境,因为是单页应用有的需要缓存,所以运用到了keep-alive。然后问题出现了,用keep-alive并没有缓存。
问题原因
经过排查,keep-alive是通过include里添加vue组件name来设置其缓存内容的,然而typescript 是用class 类名 = 组件name,导致了webpack对class类名进行了压缩,导致组件name也压缩,include里对应不起来,keep-alive方法失效。
问题解决方法
使class类名在wepack不压缩 因为我用的是vue-cli3.0构建的项目,所以我们设置vue.config.js文件
module.exports = {
// ...
configureWebpack: config => {
if (isProduction) {
// 附赠一个好方法 去除代码中的console
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true;
// 保持类名不被压缩
config.optimization.minimizer[0].options.terserOptions.keep_fnames = true;
}
}
};
结束语
前端的框架多 也意味着坑多 祝大家在坑里越走越远~ ps:第一篇文章求个关注!