phpstorm 不支持一键双进程启动，需通过 compound 配置并行运行前后端；关键在端口不冲突、代理/cors 正确配置、环境变量手动注入及调试参数（如 --inspect）精准匹配。
PhpStorm 本身不支持“一键双进程启动”，所谓“同时运行前后端”，本质是手动协调两个独立进程——前端 dev server 和后端 Node.js/PHP 服务。关键不在功能有多炫，而在配置是否稳、端口是否撞、环境变量是否透传。
为什么直接点两次 Run 不行？
常见现象：前端 npm run dev 启动了 localhost:3000，后端 node app.js 启动了 localhost:4000，但刷新页面时 API 请求 404 或 CORS 报错——不是代码问题，而是开发服务器没配代理或跨域策略没生效。
根本原因：PhpStorm 的每个 Run Configuration 是孤立进程，不自动感知彼此状态；前端 dev server（如 Vite、Webpack Dev Server）默认不代理后端请求，除非你显式配置 vite.config.ts 的 server.proxy 或 webpack.config.js 的 devServer.proxy。
- 别指望 PhpStorm 自动帮你转发
/api/xxx到后端端口——它不是反向代理工具 - 前端项目若用
fetch('/api/user')，实际发的是http://localhost:3000/api/user，不是http://localhost:4000/api/user - 后端若没开 CORS（
Access-Control-Allow-Origin: *），浏览器会直接拦截响应
正确做法：用 Compound 配置串联两个 Run Configuration
Compound 是 PhpStorm 提供的“组合运行”机制，能按顺序或并行启动多个已有配置，适合前后端联动调试。
前提：你已分别建好两个独立的 Run Configuration：
- 前端：类型为
npm，脚本选dev，工作目录指向前端项目根目录 - 后端：类型为
Node.js或PHP Script，入口文件填app.js或index.php，确保端口不冲突（如后端用4000，前端用3000）
创建 Compound：
- 打开
Run → Edit Configurations… - 点左上角
+→ 选Compound - 填 Name，比如
Frontend + Backend - 点
+添加已存在的前端和后端配置（注意勾选Allow parallel run） - 点
OK，再点右下角Apply
⚠️ 容易漏的一步：前端配置里必须启用 Run npm script with node options 并填 --max-old-space-size=4096（防内存溢出），后端配置里若用 nodemon，Node parameters 要加 --inspect=9229 才能调试。
端口冲突和环境变量怎么处理？
常见错误：Error: listen EADDRINUSE: address already in use :::3000 —— 前后端都抢同一个端口，或某配置残留旧进程占着端口。
- 检查所有配置的端口：前端 dev server 端口在
vite.config.ts的server.port或vue.config.js的devServer.port；后端端口在代码里（如app.listen(4000)）或package.json的scripts参数中 - Windows/macOS 上残留进程常卡住端口：终端执行
lsof -i :3000（macOS/Linux）或netstat -ano | findstr :3000（Windows），再kill -9 PID或taskkill /PID 1234 /F - 环境变量不生效？PhpStorm 默认不继承 shell 的
.zshrc或.bash_profile。在 Run Configuration 的Environment variables栏手动填，比如NODE_ENV=development;API_BASE_URL=http://localhost:4000
特别提醒：若前端项目依赖 .env 文件（如 Vite 的 VITE_API_BASE_URL），确保该文件存在且变量名带 VITE_ 前缀——PhpStorm 不会自动加载它，得靠前端构建工具解析。
调试时断点只停在前端、后端进不去？
现象：前端能 debug，Chrome DevTools 里看到源码映射；但后端 debugger 或断点全失效，控制台也没 Debugger attached 提示。
- 确认后端 Run Configuration 的
Node interpreter指向真实 Node.js 路径（不是空壳或 nvm 软链），且Node parameters包含--inspect-brk=9229 - 前端若用 Webpack Dev Server，它的
devServer.inline或devServer.hot开启时，可能干扰 Node.js 调试协议；建议先关掉热更新，或改用--inspect-brk启动 - PhpStorm 的
Run → Attach to Node.js/Chrome配置里，端口必须和后端启动参数一致；若后端用nodemon --inspect=9229，这里就填9229，不能填默认的9222
最隐蔽的坑：前后端项目不在同一 Git 仓库，但 PhpStorm 打开的是父目录——它可能把两个项目识别成一个，导致路径解析错乱、node_modules 加载错位。务必用 File → Open… 分别打开前后端根目录，或用 File → Project Structure → Modules 显式添加子模块。
php免费学习视频：立即使用
踏上前端学习之旅，开启通往精通之路！从前端基础到项目实战，循序渐进，一步一个脚印，迈向巅峰！
