React项目部署gh-pages时JS/CSS文件404致白屏求助

根据你的情况，试试下面这些步骤：

• 配置package.json的homepage字段
  打开项目根目录的package.json，添加一行：

  "homepage": "https://Beliy14.github.io/Soc-Sec-online"
  

  这个字段会让React打包时自动生成正确的资源引用路径，别手动改build后的HTML文件，每次打包都会覆盖你的修改。

• 用标准流程重新部署

  1. 先确保安装了gh-pages依赖：npm install gh-pages --save-dev
  2. 在package.json的scripts里添加两个命令：

     "predeploy": "npm run build",
     "deploy": "gh-pages -d build"
     

  3. 运行npm run deploy重新部署，这会自动打包并把build文件夹内容推到gh-pages分支。

• 处理React Router路由问题（如果用了路由）
  如果项目用了React Router，直接用BrowserRouter会导致路径错误，两种解决方式：

  • 换成HashRouter：

    import { HashRouter } from 'react-router-dom';
    
    ReactDOM.render(
      <HashRouter>
        <App />
      </HashRouter>,
      document.getElementById('root')
    );
    

  • 或者给BrowserRouter加basename参数：

    import { BrowserRouter } from 'react-router-dom';
    
    ReactDOM.render(
      <BrowserRouter basename="/Soc-Sec-online">
        <App />
      </BrowserRouter>,
      document.getElementById('root')
    );
    

• 清理缓存重新部署
  如果上面步骤没用，试试清缓存：

  • 运行npm run build重新生成build文件夹
  • 删除本地的gh-pages分支：git branch -D gh-pages
  • 再运行npm run deploy重新部署

• 检查GitHub Pages设置
  打开你的仓库页面，进入Settings -> Pages，确认Source选择的是gh-pages分支的root目录，并且页面显示"Your site is live at..."。

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