GitHub Pages已存在文件出现404错误，Vue博客遇WSOD问题

嘿，我来帮你排查这个恼人的白屏问题！从你描述的情况和控制台的404报错来看，这几乎可以肯定是Vue项目的公共路径配置不正确导致的——这是部署到GitHub Pages子路径（比如你的/smga/）时非常常见的小坑。

问题根源 #

Vue项目默认的公共路径（Vue CLI里叫publicPath，Vite里叫base）是根路径/，也就是说它会默认从网站根目录加载静态资源。但你的站点是部署在https://wonder95.github.io/smga/这个子路径下的，所以当页面请求/static/js/app.xxx.js这类资源时，浏览器会去https://wonder95.github.io/static/js/app.xxx.js找，而不是正确的https://wonder95.github.io/smga/static/js/app.xxx.js，自然就会出现文件找不到的404错误。

具体解决方案 #

根据你使用的Vue构建工具，分两种情况处理：

如果你用的是Vue CLI创建的项目

1. 在项目根目录创建或修改vue.config.js文件，添加publicPath配置：

   module.exports = {
     // 生产环境下使用子路径，开发环境保持根路径
     publicPath: process.env.NODE_ENV === 'production'
       ? '/smga/'
       : '/'
   }
   

2. 重新执行构建命令：npm run build
3. 将新生成的dist目录下的所有文件，重新推送到gh-pages分支

如果你用的是Vite创建的项目

1. 修改vite.config.js里的base配置：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   export default defineConfig({
     plugins: [vue()],
     // 设置为你的GitHub仓库名
     base: '/smga/'
   })
   

2. 重新构建：npm run build
3. 同样把新的构建产物推送到gh-pages分支

额外检查点 #

• 推送完成后，去GitHub的gh-pages分支里查看index.html，确认里面引用的静态资源路径已经带上了/smga/前缀（比如<script src="/smga/static/js/app.xxx.js"></script>），这说明配置已经生效。
• 访问站点前记得清除浏览器缓存（快捷键Ctrl+Shift+R），避免旧的缓存影响结果。

内容的提问来源于stack exchange，提问作者wonder95