无法定位index文件中问题：Github Pages部署后页面空白无报错

问题原因排查及解决方案 #

常见根因 #

Github Pages部署后无报错空白，基本都是路径配置或者发布源配置错误导致：

1. 打包工具基础路径配置错误：项目站点（非<用户名>.github.io根站点）的静态资源默认会从域名根路径查找，没有配置对应仓库前缀的话会找不到资源
2. Pages发布源配置错误：配置的发布分支/目录和实际打包产物存放的位置不匹配
3. 前端路由模式不兼容：Github Pages默认不支持history模式的前端路由，直接访问会导致空白
4. 部署未生效或浏览器缓存问题

具体修复步骤 #

• 调整打包基础路径配置
  如果你用的是Vite构建的项目，在vite.config.js中添加如下配置：

  import { defineConfig } from 'vite'
  export default defineConfig({
    base: '/Mini-Challenge/', // 此处填写你的仓库名称，前后都要加斜杠
    // 其余原有配置保留
  })
  

  如果你用的是Create React App创建的项目，在package.json中添加字段：

  "homepage": "https://juanpegallego.github.io/Mini-Challenge"
  

  如果你用的是Vue CLI创建的项目，在vue.config.js中添加配置：

  module.exports = {
    publicPath: '/Mini-Challenge/'
  }
  

• 调整Github Pages发布配置
  进入仓库Settings页，找到Pages选项，在Build and deployment板块下：
  • Source选择「Deploy from a branch」
  • Branch选择你存放打包产物的分支（如果是单独的gh-pages分支就选gh-pages，目录选/root；如果打包后的dist目录放在main分支下就选main分支，目录选/dist）
    保存配置
• 调整路由模式（如果用到了前端路由）
  把history模式替换为hash模式：React项目把<BrowserRouter>替换为<HashRouter>，Vue项目把路由创建方式从createWebHistory改为createWebHashHistory
• 重新打包部署
  执行对应打包命令（一般为npm run build），把打包后的产物推到对应配置的分支，等待2-5分钟部署生效后，用浏览器无痕模式访问测试即可

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