使用React/Vite部署Github Pages遇空白页及MIME类型错误求助

你的问题核心是Vite和Create React App的部署配置逻辑不同，照搬CRA的方案自然无效，下面是针对性的解决步骤：

• 首先安装部署依赖：

  npm install gh-pages --save-dev
  

• 修改vite.config.js，添加base配置（对应你的Github Pages子路径）：

  import { defineConfig } from 'vite'
  import react from '@vitejs/plugin-react'
  
  export default defineConfig({
    plugins: [react()],
    base: '/portfolio/' // 必须和你的仓库名一致
  })
  

• 修改package.json，补充首页地址和部署脚本：

  {
    "homepage": "https://chris-azuaje.github.io/portfolio/",
    "scripts": {
      // 保留原有脚本，新增以下两行
      "predeploy": "npm run build",
      "deploy": "gh-pages -d dist"
    }
  }
  

• 重新执行部署命令：

  npm run deploy
  

• 最后检查Github Pages的设置：确保部署源选择gh-pages分支的根目录，而非其他分支或路径。

错误原因说明 #

你遇到的MIME类型错误，本质是资源路径配置错误：没有设置正确的base时，浏览器请求的JS文件路径不存在，Github Pages会返回默认的HTML内容（MIME类型为text/jsx），导致浏览器无法识别为模块脚本。

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