React Vite项目部署至GitHub Pages出现main.jsx 404错误求助

以下是针对你遇到的部署后资源404问题的排查和解决步骤：

1. 配置Vite的base路径 #

GitHub Pages部署在子路径（/Food-Recipe-App/）下，Vite默认会以根路径加载资源，导致找不到文件。需要修改vite.config.js（或.ts）：

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

export default defineConfig({
  base: '/Food-Recipe-App/', // 匹配你的GitHub Pages子路径
  plugins: [react()],
})

2. 设置package.json的homepage字段 #

在package.json中添加homepage，确保构建时资源路径正确：

{
  "homepage": "https://sreejith-10.github.io/Food-Recipe-App/",
  "scripts": {
    "build": "vite build",
    // 其他脚本...
  }
}

3. 检查构建输出与部署文件 #

• 执行npm run build生成dist目录，确认里面的JS文件是main.xxx.js（带hash后缀），而不是main.jsx——Vite构建时会编译JSX为JS，页面引用的应该是编译后的文件，若页面仍引用main.jsx，说明构建或配置有问题。
• 部署时确保dist目录下的所有文件都完整上传到GitHub Pages的部署分支（通常是gh-pages）。

4. 路由适配（若使用React Router） #

如果项目用了React Router的BrowserRouter，需要设置basename匹配子路径，或者改用HashRouter避免路径问题：

方式一：设置basename #

import { BrowserRouter } from 'react-router-dom'

function App() {
  return (
    <BrowserRouter basename="/Food-Recipe-App">
      {/* 路由内容 */}
    </BrowserRouter>
  )
}

方式二：改用HashRouter #

import { HashRouter } from 'react-router-dom'

function App() {
  return (
    <HashRouter>
      {/* 路由内容 */}
    </HashRouter>
  )
}

完成以上配置后，重新构建并部署，应该能解决资源404的问题。

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