前提： vue + typescript ，組件采用 vue-property-decorator + class 作為組件的方式。
最近開發項目，用了 keep-alive 來緩存路由，以前使用路由緩存，都是設置 meta:{ keepAlive:true} 的方式，直接編寫路由的時候配置就行。
這次換成了 include 的方式就翻車了，本地開發的時候都好好的，路由緩存什么的也正常，但是打包之后，include 里面配置的組件緩存就無效了(⊙o⊙)？
就很奇怪，為什么本地好好的，打包就出問題？而且除了 activated 生命周期不執行，其它的都正常？
結果發現是因為：
打包之后，用 class 作為組件名的時候，class 名被壓縮了，導致 include 配置的class 名 對應不上，就無效，肯定就不會觸發 activated 生命周期。
原因找到了，那怎么解決呢？
方法一：在 @Component 注解里面加上 name 屬性，include 里面配置 這個name 即可
方法二：在配置 include 的時候，使用 組件名.name
方法三：配置webpack，不編譯class名
在 vue.config.js 中 的 configureWebpack 配置項加入如下內容。這樣打包出來的
configureWebpack: config => { // 保持類名不被壓縮
config.optimization.minimizer[0].options.terserOptions.keep_fnames = true; }
webpack官方說明：
為什么這樣配？因為 vue-cli 已經配置了默認的 terser 插件來壓縮 js。官網配置說明
可以運行的時候，查看config有哪些東西，內容太多就不截圖了。
先看看 config.optimization.minimizer 默認的內容有哪些
里面有個 terserOptions 就是 壓縮插件的核心配置，官網配置說明
配置里面的 keep_fnames 就是我們所需的不壓縮class名的配置。 這里面還有個 keep_classnames ，默認是undefined，感興趣的可以看一下和 keep_fnames 的區別。
不過，如果只配置 keep_classnames ，不配置 keep_fnames ，緩存一樣的不生效，具體的就不去深究了。
vue-cli3 和 vue-cli4 的配置有可能不一樣，具體查看官網v3遷移到v4說明
我的理解：
方法一設置了name之后，最后執行下去，component 組件的 name 值就是 extendOptions 的 name。就能和 配置的 include里面的內容對應上
方法二會保證name同一
如果沒有不設置name 和 不壓縮，那么結果就是
