React+Vite应用部署至Heroku后显示空白页，请求技术支持

我开发了一个React应用，为优化性能改用Vite构建。本地构建预览一切正常，但部署到Heroku后页面显示空白，请求协助排查。以下是相关配置信息：

前端package.json的scripts配置 #

"scripts": {
        "start": "serve -s build",
        "dev": "vite",
        "build": "tsc && vite build",
        "test": "vite test",
        "eject": "vite eject",
        "preview": "vite preview"
    }

后端package.json的scripts配置 #

"scripts": {
        "data:import": "ts-node ./src/models/seeder.model.ts",
        "data:destroy": "ts-node src/models/seeder.model.ts -d",
        "test": "echo \"Error: no test specified\" && exit 1",
        "start": "node dist/server.js",
        "postinstall": "tsc ",
        "tsc": "./node_modules/typescript/bin/tsc",
        "watch-node": "nodemon dist/server.js",
        "server": "nodemon ./src/server.ts ",
        "client": "npm start --prefix fa-shop",
        "watch-ts": "tsc -w",
        "deploy": "git add . && git commit -m Heroku && git push heroku main",
        "heroku-postbuild": " npm install --prefix fa-shop && npm run build --prefix fa-shop",
        "dev": "concurrently \"npm run server\" \"npm run client \" "
    }

项目文件夹结构 #

appBackend --
           -- node_modules/backend
           -- frontend
                      --- node_modules/frontend

Heroku状态 #

Heroku控制台无报错（控制台显示无错误信息）

排查方向及解决办法 #

1. 修正前端文件夹路径匹配问题
   你的项目结构里前端文件夹是frontend，但后端scripts里的client和heroku-postbuild命令都用了--prefix fa-shop，这会导致Heroku无法正确找到前端项目进行依赖安装和构建，直接导致部署后没有静态资源，页面空白。把后端package.json里的对应命令改成：

   "client": "npm start --prefix frontend",
   "heroku-postbuild": "npm install --prefix frontend && npm run build --prefix frontend"
   

2. 检查Vite的base路径配置
   Vite默认base路径为/，如果后端托管静态资源的路径有调整，会导致静态资源加载失败。在前端项目的vite.config.ts（或vite.config.js）里添加base配置：

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   
   export default defineConfig({
     plugins: [react()],
     base: './' // 根据实际部署路径调整，确保静态资源能正确加载
   })
   

3. 确认后端静态资源托管配置
   后端需要正确托管前端构建后的build目录，以Express为例，要添加以下配置（注意路径要和你的项目结构对应）：

   import path from 'path';
   // 托管前端静态文件
   app.use(express.static(path.join(__dirname, '../frontend/build')));
   
   // 处理SPA路由，所有非API请求返回index.html
   app.get('*', (req, res) => {
     res.sendFile(path.join(__dirname, '../frontend/build/index.html'));
   });
   

4. 查看浏览器控制台错误
   打开浏览器开发者工具（F12），查看Console和Network标签，检查是否有静态资源加载404的情况，这是页面空白的常见原因。

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