为什么Vue项目在Chrome Application的Cache Storage显示为空？

夏侯雨欣提问于 2026-02-19 12:36:26 阅读 44

工具

在开发Vue3项目时，我按照教程配置了service worker并尝试缓存资源，但Chrome开发者工具Application面板的Cache Storage始终显示为空。明明用Network能看到资源被缓存了，这是怎么回事？

我检查了代码，service worker注册和fetch拦截都正常，但就是看不到缓存列表。这是我的相关代码：


// serviceWorker.js
self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then(cacheRes => cacheRes || fetch(event.request))
  )
})

尝试过清除浏览器缓存、重启服务、检查scope路径，但问题依旧。难道是Vue的缓存机制和普通service worker表现不同？或者需要开启某些特殊选项才能在Application里看到缓存？

我来解答赞 5 收藏

反馈

2 条解答

书生シ雨涵 Lv1

你漏了 caches.open('xxx') 和 cache.addAll() 这两步，光拦截请求不会自动存进 Cache Storage。
得在 install 事件里显式缓存资源，比如：

self.addEventListener('install', (event) => {

  event.waitUntil(

    caches.open('my-cache-v1')

      .then((cache) => cache.addAll(['/','/index.html','/app.js']))

  )

})

加了这个，再刷新页面，Cache Storage 就能看见了，就行了。

2026-02-27 05:02

公孙宇泽 Lv1

你这个问题是因为没在service worker里主动创建和管理缓存。光拦截fetch请求是不够的，还得用caches.open来初始化缓存。

// serviceWorker.js

self.addEventListener('install', (event) => {

  event.waitUntil(

    caches.open('my-cache').then(cache => 

      cache.addAll([

        '/',

        '/index.html',

        '/main.js',

        '/style.css'

      ])

    )

  );

});



self.addEventListener('fetch', (event) => {

  event.respondWith(

    caches.match(event.request)

      .then(cacheRes => cacheRes || fetch(event.request))

  );

});

记得在vue.config.js里确认pwa插件配置正确，特别是workbox部分要启用。改完重启项目，Application面板就能看到缓存了。

2026-02-19 13:01