vue3项目启动后访问http://localhost:3000/，发现页面不是vue3项目首页，都是serviceWorker惹的祸

我的vue3项目正常页面打开应该显示：

可是打开后访问的页面却是下面这样：

看到页面后我的表情是一脸懵逼(´⊙ω⊙`)。见鬼了，怎么这样，肯定是浏览器缓存，清缓存，结果还是这个吊样。

我仔细一看这个页面不是之前我自己写的 webpack4 的 demo 吗。
于是我找到我练习时候的代码，发现这里注册过 serviceWorker ←

serviceWorker是什么，一句话概括核心功能就是拦截和处理网络请求，以编程方式管理响应缓存。

看没看到，拦截、缓存两个词。

// index.js

// 注册serviceWorker
if ('serviceWorker' in navigator) {
  window.addEventListener('load', () => {
    navigator.serviceWorker
      .register('/service-worker.js')
      .then(() => {
        console.log('sw注册成功~~~');
      }).catch(err => {
        console.log('sw注册失败~~~');
      })
  })
}

// server.js

const express = require('express');
const app = express()
// 开放静态资源，打包后可以访问
app.use(express.static('build', { maxAge: 1000 * 3600 }))
app.listen(3000, () => {
  console.log('http://localhost:3000');
})

于是我还是打开浏览器，打开控制台，找到 Application，一个一个去找缓存，终于在 CacheStorage ← 下面发现了缓存代码。

CacheStorage主要用途是用于对请求的缓存。

终于找到问题的根源了，直接清掉 CacheStorage ，问题就解决了。重新访问，页面恢复正常。