vue-cli-plugin-bundle-service-worker Vue CLI 3插件支持自定义Service Worker
vue-cli 项目里的服务工作者要搞点事情，vue-cli-plugin-bundle-service-worker还挺顺手的。它用的是 webpack 构建方式，挺适合你需要在 service worker 里引入一些自定义模块的时候。不是那种只靠 workbox 生成默认逻辑的写法，走的是InjectManifest模式，灵活不少。
插件用法也比较直白，先通过npx @vue/cli add bundle-service-worker装上，在vue.config.js里加点配置就行。注意哦，@vue/pwa插件得配上，而且模式要是InjectManifest，不然没法注入你自己的sw.js。
比如你要在service-worker里一些复杂逻辑、引入外部模块、缓存非静态资源，那就合适了。它的构建逻辑不会被 vue-cli 默认的 workbox 覆盖，代码结构清晰，可控性也更高。
我之前在做一个需要缓存接口返回数据的 pwa 小项目时就用上了这个插件，sw.js里直接引入封装的缓存方法，响应也快，逻辑也更可控。
如果你已经在用vue-cli 3+，又刚好要折腾PWA、service worker 这块，可以试试它。只要别忘了配置swSrc路径指向你自己的src/service-worker.js文件，基本不会踩坑。
文件大小：4.58KB
评论区