一、报错

控制台出现该报错，是指未找到资源。

引发报错的代码：javascript文件中，加载mp3音频：

const hitSound = new Audio('/sounds/hit.mp3')

二、可能的原因

可能的原因：静态资源路径配置错误。
文件存放路径：22-vite/public/sounds/hit.mp3
静态资源路径：static
查看webpack.dev.js，我们能发现静态资源路径是static文件夹：

static:
{
    watch: true,
    directory: path.join(__dirname, '../static')
},

三、解决方法

找到 webpack.dev.js，配置静态路径，将22-vite/public也添加到静态路径即可：

static:[
    {
        watch: true,
        directory: path.join(__dirname, '../static')
    },
    {
        watch: true,
        directory: path.join(__dirname, '../22-vite/public')
    },
],

成功运行！

四、小结与思考

项目是从网络下载然后修改的，感觉它的结构有些奇怪，明明使用的是 webpack，却有命名为 vite 的文件夹，暂时理解为项目的不完整叭：

一些对于webpack的好奇：
如何判断项目使用的是Webpack还是Vite？
npm run 是什么？为什么使用npm run 这一命令，就能够将 webpack 跑起来并进行下一步的操作？
npm run dev 后 webpack-dev-server 做了哪些事情