Vite+React项目部署至GitHub Pages与Netlify后显示空白页面问题求助
2026-4-7
Vite+React项目部署至GitHub Pages与Netlify后显示空白页面问题求助
各位大佬好，我从昨天开始一直在死磕这个问题，刷了好多教程视频、翻了无数社区讨论帖，每一步都严格照着操作，但还是反复遇到同一个问题——我用Vite+React搭建的个人网站，部署到GitHub Pages和Netlify后都是空白页面，甚至本地运行vite build生成生产包后，用vite preview预览也没法正常显示内容。我刚接触Vite和React没多久，实在摸不着头脑，恳请大家帮忙排查一下！
项目基本情况
- 技术栈：Vite + React（纯新手）
- 部署尝试：GitHub Pages、Netlify，本地生产构建预览均失败
- 部署操作：跟着视频教程，仅上传了构建后的
dist文件夹到部署平台 - 当前问题：所有环境下都显示空白页面，无法加载预期的网站内容
相关配置文件
package.json
{ "name": "my-website", "homepage": ".", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "predeploy": "npm run build", "deploy": "gh-pages -d dist", "build": "vite build", "lint": "eslint .", "preview": "vite preview" } }
vite.config.js
import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' // https://vite.dev/config/ export default defineConfig({ base: "./", plugins: [react()], })
源码与构建后的index.html对比
源码目录下的index.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Alex Fuller</title> </head> <body> <div id="root"></div> <script type="module" src="src/main.jsx"></script> </body> </html>
构建后dist目录下的index.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Alex Fuller</title> <script type="module" crossorigin src="./assets/index-FmxQ_R_g.js"></script> <link rel="stylesheet" crossorigin href="./assets/index-DmEcuB40.css"> </head> <body> <div id="root"></div> </body> </html>
补充信息
- 我的GitHub仓库可提供完整项目代码参考
- Netlify部署预览地址：peppy-griffin-276833.netlify.app
- 网站原本应该展示完整的页面内容，但现在所有环境下都只显示空白
真心希望各位能给点思路，谢谢大家！
内容来源于stack exchange
