React站点Netlify正常显示，GitHub Pages加载空白报错求助

问题根源 #

GitHub Pages服务器会将.jsx文件识别为text/jsx MIME类型，但浏览器加载模块脚本时要求的是application/javascript类型。Netlify能正常运行是因为它会自动处理静态资源的MIME类型，且默认执行项目构建命令生成正确的静态文件，而你大概率是直接将未构建的源码或错误文件部署到了GitHub Pages。

解决方案 #

1. 本地执行Vite构建命令 #

在项目根目录运行以下命令，生成编译后的静态文件：

npm run build

执行完成后会生成dist文件夹，里面是纯JavaScript、CSS和HTML文件，不再包含.jsx源文件。

2. 配置Vite的base路径 #

修改vite.config.js，根据你的部署路径设置正确的base值：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: '/' // 你的仓库是jschlte.github.io（根路径部署），所以设为'/'
})

如果是部署到子仓库（如username.github.io/repo-name），则base需改为'/repo-name/'。

3. 正确部署到GitHub Pages #

有两种可靠的部署方式：

• 手动部署：将dist文件夹内的所有内容（不要上传dist文件夹本身），上传到GitHub仓库的main分支或gh-pages分支（取决于你的Pages设置）。
• 自动构建部署（推荐）：在项目根目录创建.github/workflows/deploy.yml文件，内容如下：

name: Deploy to GitHub Pages
on:
  push:
    branches: [main]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - name: Install dependencies
        run: npm install
      - name: Build project
        run: npm run build
      - name: Deploy to Pages
        uses: peaceiris/actions-gh-pages@v4
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist

之后在GitHub仓库的「Settings -> Pages」中，设置部署来源为gh-pages分支的/root路径。

4. 验证部署结果 #

部署完成后访问GitHub Pages链接，打开浏览器开发者工具的Network面板，确认加载的脚本后缀为.js，且Response Headers中的Content-Type为application/javascript。

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