GitHub 部署静态网站js 和 css 文件资源显示404

GitHub 部署静态网站（js 和 css 文件资源显示404，引入失败）
实现 GitHub 部署 vue 打包出来的静态网站。
省略项目与GitHub仓库关联的部分，这边只记录关键点（因为我自己在第一次部署的时候出现了个问题）。

问题与解决

这边先将自己部署的时候遇到的问题：

在部署完成之后发现页面无法正常显示，查看控制台后发现自己的css文件和js文件的URL路径不对，都是404。于是思考为什么会出现404的问题，结果发现路径并没有在当前的 own_tools 仓库下，于是查看了下自己通过webpack的打包配置。

关键部分就是要设置 publicPath 的路径，我这边换了自己的仓库之后就可以了。因为默认部署的路径是根路径，所以不设置的话其实请求的是 github.io/ 服务器路径上的文件，而不是 github.io/own_tools/ 仓库路径下的文件。（这样设置完成之后就可以啦）

部署步骤

我是 vue 项目通过 webpack5 进行打包，其他框架的话基本都是差不多的，主要是部署打包完成之后的静态文件。

1.打包配置

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '/own_tools/', // 自己GitHub上的仓库名称两边 / 不能省略
  outputDir: 'docs', // 打包输出的文件名称（不配置也可以，默认是dist）
  assetsDir: 'static', // 静态资源（js、css等）存放路径，相对outputDir
})

2.把打包生成的文件推送到远程仓库

我打包生成的文件：

可以看到打包文件已经推送成功：

3.点击setting

4.设置pages

可以看到点击左侧的pages后，会让你进行选择需要部署的文件，我们需要部署的文件就是mian分支下的docs文件，选择docs文件GitHub就会默认查找该文件下的index.html作为入口文件，这样页面就可以显示出来了，记得点击下旁边的Save按钮。

5.等待页面部署

等待一分钟后刷新页面。可以看到页面就部署成功了，点击 Visit site就可以访问部署的网页啦。

这篇好文章是转载于：学新通技术网