解决Windows下根目录运行 pnpm dev “无法启动 Vite 前端，只能启动 Express 后端”

这是一个非常常见的问题！你运行 pnpm dev 在根目录，只启动了 Express 后端，Vite 前端没启动 ，说明你的 dev 脚本没有正确并行启动两个服务。

我们来一步步排查并解决这个问题 ✅

---

🔍 问题分析

你当前的 package.json（根目录）脚本是：

"scripts": {
  "dev": "pnpm --filter backend start & pnpm --filter frontend dev"
}

这个命令在 Windows 系统上会失败，因为：

❌ 问题 1：& 在 Windows CMD/PowerShell 中不支持并行执行

• & 是 Unix/Linux 的并行符号
• Windows 的 CMD 不支持 & 来并行运行两个命令
• 所以只有第一个命令 pnpm --filter backend start 执行了，第二个被忽略

❌ 问题 2：pnpm --filter frontend dev 要求 frontend 包有 "dev" 脚本

• 你必须在 frontend/package.json 中定义 "dev": "vite"，否则会报错

---

✅ 解决方案（跨平台兼容）

✅ 方法一：使用 concurrently（推荐 ★★★★★）

concurrently 是一个专门用于并行运行多个命令的工具，支持 Windows、macOS、Linux。

---

第一步：安装 concurrently（在根目录）

pnpm add -D concurrently

---

第二步：修改根目录 package.json 的 scripts

{
  "scripts": {
    "dev": "concurrently \"pnpm --filter backend start\" \"pnpm --filter frontend dev\"",
    "build": "pnpm --filter frontend build && pnpm --filter backend build",
    "preview": "node backend/server.mjs"
  }
}

🔥 注意：

• 使用 concurrently 并行执行
• 命令用 \" 转义（JSON 字符串）
• 支持所有操作系统 ✅

---

第三步：确保 frontend/package.json 有 dev 脚本

打开 frontend/package.json，确保有：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

如果没有，添加它。

---

第四步：启动项目

pnpm dev

你会看到输出类似：

[backend] 🚀 Express 服务器运行在 http://localhost:3000
[frontend] VITE v4.0.0  ready in 123ms
[frontend] ➜  Local:   http://localhost:5173/

✅ 两个服务都启动了！

---

✅ 方法二：使用 npm-run-all（备选）

pnpm add -D npm-run-all

然后修改脚本：

{
  "scripts": {
    "dev": "run-p backend:start frontend:dev",
    "backend:start": "pnpm --filter backend start",
    "frontend:dev": "pnpm --filter frontend dev"
  }
}

run-p = 并行执行（parallel）

---

✅ 方法三：手动分开启动（调试用）

如果你只想快速验证，可以开两个终端：

# 终端 1：启动后端
cd backend
node server.mjs

# 终端 2：启动前端
cd frontend
pnpm dev

---

🧪 验证是否成功

访问：

• ✅ http://localhost:5173 → 应该看到 Vue 页面
• ✅ http://localhost:3000/api/hello → 应该返回 JSON
• ✅ 浏览器访问 http://localhost:5173 能调通 /api/hello（通过 Vite 代理）

---

🛠️ 补充建议

1. 添加 .env 控制环境

在 frontend/.env 中添加：

VITE_APP_API_BASE=/api

在代码中使用：

fetch(import.meta.env.VITE_APP_API_BASE + '/hello')

2. 确保 Vite 代理配置正确

vite.config.js 中：

proxy: {
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
  }
}

3. 检查端口冲突

• 确保 3000（Express）和 5173（Vite）都没被占用
• 可以用 lsof -i :3000（macOS/Linux）或 netstat -ano | findstr :3000（Windows）查看

---

✅ 总结：修复步骤

步骤	操作
1	pnpm add -D concurrently
2	修改根 package.json 脚本为 concurrently "..." "..."
3	确保 frontend/package.json 有 "dev": "vite"
4	运行 pnpm dev

---

🎉 现在你的 pnpm dev 应该能同时启动 Express 后端和 Vite 前端了！

如果还有问题，请贴出：

• 你运行 pnpm dev 的完整终端输出
• frontend/package.json 的 scripts
• 你用的操作系统（Windows/macOS/Linux）

我可以帮你精准定位问题！