一般有两种情况，一种是页面空白，但没有 404，一种是 404。
第一种，如果出现空白，且没有加载出资源，一般是因为资源的基础路径出现了问题。解决这个问题的思路就是将资源的基础路径设置为正确的路径。
// vue.config.js
// 基本路径根据当前是生产环境还是开发环境来判断
let BASE_URL = process.env.NODE_ENV === 'production' ? '/package.json配置中的项目名称/' : '/'
// 配置给 publicPath 基础路径
module.exports = defineConfig({
publicPath: BASE_URL
})
基础路径有两个值，如果是生产环境（即线上布署）则设置为项目名称，否则，如果是开发环境，则设置为根目录。在本地环境中，默认情况下，如果不是根目录，也会出现与线上布署一样的问题。同时注意，根目录是 '/'，而不是 './'，没有小点。
这里一定要注意，布署项目的 github 仓库名称也要与这个项目名称相同，否则同样会出现资源路径的错误问题。
第二种，如果出现 404。
使用路由切换页面时，看起来的效果是页面在动态切换，实际上页面并没有真正刷新，路由是伪资源地址，因此，一旦布署上线，页面刷新了，没有后端支持的路由 URI 会被 github pages 当做真实的地址去请求资源，从而导致被引导到 404 页面。
解决这个问题的思路是，在打包项目的根目录配置一个与 index.html 完全一样的文件，但取名为 404.html，并且一定要与 index.html 在同一个目录级别。
在 github 中的解决方式是，直接在 index.html 所在目录复制一个 index.html 并改名为 404.html，再更新到仓库中去。
如果仅仅是想布署为静态网站，而不寻求后端支持，可以关闭路由的 history 模式，使用默认的 hash 模式，它只能改参数而不允许改域名部分，参数修改了才会向后端请求资源。而 history 则会获取整个地址向后端请求资源，地址上任何改动都会向后端发送请求。