vue项目使用service worker的问题

Question

问题描述

想尝试一下service-worker,但是在vue项目里发现直接使用有些问题。
因为webpack打包的原因，打包前后的文件已经不一样了，cache.addAll的缓存数组应该如何设置？

问题出现的环境背景及自己尝试过哪些方法

我使用vuecli建立一个helloworld的简单项目之后加入如下的sw代码

var VERSION = 'v1';

// 缓存
self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(VERSION).then(function(cache) {
      return cache.addAll([
        './index.html',
      ]);
    })
  );
});

// 缓存更新
self.addEventListener('activate', function(event) {
  event.waitUntil(
    caches.keys().then(function(cacheNames) {
      return Promise.all(
        cacheNames.map(function(cacheName) {
          // 如果当前版本和缓存版本不一致
          if (cacheName !== VERSION) {
            return caches.delete(cacheName);
          }
        })
      );
    })
  );
});

// 捕获请求并返回缓存数据
self.addEventListener('fetch', function(event) {
  event.respondWith(caches.match(event.request).catch(function() {
    return fetch(event.request);
  }).then(function(response) {
    caches.open(VERSION).then(function(cache) {
      cache.put(event.request, response);
    });
    return response.clone();
  }).catch(function() {
    return caches.match('./static/mm1.jpg');
  }));
});

然后项目的网络请求就变成下图，同时页面没有任何响应。

你期待的结果是什么？实际看到的错误信息又是什么？

显然是因为请求被拦截里里，而缓存路径里却没有对应的文件不对，我想知道vue项目里使用serviceworker的话，如何在请求时缓存build之后的dist目录里的文件呢