React网站部署后显示空白页问题求助

核心问题分析 #

你的项目出现空白页主要有三个原因：

1. Vite基础路径未配置：GitHub Pages部署在子路径下，默认的根路径/会导致资源加载失败
2. BrowserRouter未设置basename：路由无法匹配子路径下的页面
3. 代码语法错误：App.jsx中组件导入的最后一项多了逗号，引发语法报错

具体修复步骤 #

1. 配置Vite基础路径 #

在项目根目录创建或修改vite.config.js，添加仓库名作为base路径：

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

export default defineConfig({
  plugins: [react()],
  base: '/Murtazaportfolio-main/' // 替换为你的仓库名称
})

2. 修复App.jsx的语法错误并配置路由basename #

移除StarsCanvas后的多余逗号，同时给BrowserRouter添加basename属性：

import { BrowserRouter } from "react-router-dom";

import {
  About,
  Contact,
  Experience,
  Feedbacks,
  Hero,
  Navbar,
  Tech,
  Works,
  StarsCanvas // 去掉此处多余的逗号
} from "./components";

const App = () => {
  return (
    <BrowserRouter basename="/Murtazaportfolio-main"> {/* 配置子路径路由前缀 */}
      <div className="relative z-0 bg-primary">
        <div className="bg-hero-pattern bg-cover bg-no-repeat bg-center">
          <Navbar />
          <Hero />
        </div>
        <About />
        <Experience />
        <Tech />
        <Works />
        <Feedbacks />
        <div className="relative z-0">
          <Contact />
          <StarsCanvas />
        </div>
      </div>
    </BrowserRouter>
  );
};

export default App;

3. 正确打包并部署 #

• 执行打包命令生成静态文件：

npm run build

• 部署方式二选一：
  • 自动部署（推荐）：在仓库的.github/workflows目录下创建deploy.yml，提交后GitHub Actions会自动构建部署到Pages：

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

  • 手动部署：将dist文件夹内的所有文件上传到仓库的gh-pages分支，然后在仓库设置的Pages选项中，选择部署源为gh-pages分支的根目录。

4. 验证修复 #

部署完成后，访问你的Pages地址，检查浏览器控制台是否还有资源加载错误或语法错误，确认React应用正常渲染。

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