报错：Failed to load resource: the server responded with a status of 404 ()

￡神魔★判官ぃ 2022-02-05 02:25 281阅读 0赞

js项目上传到 github 时，设置好 GitHub Pages 后打开：[https://70kg111.github.io/HUAWEI-MUSIC/index.html][https_70kg111.github.io_HUAWEI-MUSIC_index.html]

**提示报错：** Failed to load resource: the server responded with a status of 404 ()

![在这里插入图片描述][20190504142953813.png]  
**路径错误：** 导致 css文件，js文件并未加载出来

**原因：**

后面去问了别人才知道在本地能够顺利打开的，本地在写代码时多了一个 npx parcel index.html 的步骤  
这样会生成一个 [http://loacalhots:1234][http_loacalhots_1234] ，写代码的时候也是在这个网站上看页面效果  
这相当于一个测试的服务器，但 github 上并没有这个过程，所以会报错

**解决办法：**

一、因为所有的文件其实都已经上传到 dist 目录下了，所以可以直接将 dist 这个文件夹单独拎出来作为一个项目上传到 github 上，然后设置 GitHub Pages 预览 dist/index.html 即可。

二、也可以将原本项目内的 dist 文件下 index.html 中引入 css，js 文件的目录改掉，因为 dist 文件夹下的内容其实是被 npx parcel build index.html 之后才生成的。  
所以直接引入原始文件夹的 css ，js 文件，然后设置 GitHub Pages 预览 dist/index.html 即可，如下图：  
![在这里插入图片描述][20190504143756837.png]

[https_70kg111.github.io_HUAWEI-MUSIC_index.html]: https://70kg111.github.io/HUAWEI-MUSIC/index.html
[20190504142953813.png]: /images/20220205/61fc9a40a7b94f3bbe8ccd99ae4c7fe4.png
[http_loacalhots_1234]: http://loacalhots:1234
[20190504143756837.png]: /images/20220205/ed3047e49019458cbef3ad4949d1f447.png