如何在Vercel部署MERN全栈项目？部署后页面异常求解决

前端配置检查 #

• 确认vercel.json的重写规则是否适配SPA应用，正确配置应为：

  {
    "rewrites": [
      { "source": "/(.*)", "destination": "/index.html" }
    ]
  }
  

• 检查Vite的vite.config.js中base配置：根域名部署时设为'/'，子路径部署需指定对应路径（如'/your-project-name/'）。
• 确认Vercel构建配置：构建命令选npm run build，输出目录指定为dist（Vite默认构建产物目录）。

后端配置检查 #

• 后端.Procfile内容需匹配服务启动命令，示例：web: node server.js（替换为你的后端入口文件名）。
• 同步环境变量：将本地.env中的MongoDB连接串、端口号等配置，添加到Vercel项目设置的环境变量中。
• 验证后端服务：确保本地能正常启动，前端API请求地址需替换为Vercel部署后的后端域名，或通过环境变量动态切换开发/生产地址。

项目结构与Vercel部署设置 #

• 针对backend和frontend双目录结构，可通过两种方式部署：
  1. 分别为前后端创建独立Vercel项目，各自完成部署。
  2. 根目录创建vercel.json配置Monorepo构建规则：

     {
       "builds": [
         {
           "src": "frontend/package.json",
           "use": "@vercel/static-build",
           "config": { "distDir": "dist" }
         },
         {
           "src": "backend/package.json",
           "use": "@vercel/node"
         }
       ],
       "routes": [
         { "src": "/api/(.*)", "dest": "/backend/api/$1" },
         { "src": "/(.*)", "dest": "/frontend/$1" }
       ]
     }
     

• 查看Vercel部署日志的构建细节，排查隐性警告（如依赖安装失败、资源路径错误等）。

页面异常直接排查 #

• 打开浏览器开发者工具（F12），查看控制台报错信息，重点关注资源加载404、API请求失败等提示。
• 检查静态资源路径：确认Vite构建后的CSS、JS文件能被正确加载，路径与部署环境匹配。

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