vue和typescript开发时keep-alive无效解决方法

问题发现

开发过程中运用了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：第一篇文章求个关注！