• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    迪恩网络公众号

记:vue + typescript ,路由使用keep-alive,include的缓存方式,打包后导致activate ...

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

前提: 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 和 不压缩,那么结果就是

 


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
带你了解Typescript的14个基础语法发布时间:2022-07-18
下一篇:
TypeScript 接口(三)发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap