如何自动在两个Shell标签页运行Node应用前后端开发服务器？

问题根源 #

你的脚本执行到cd $backend_dir && npm run dev时，该命令会前台运行后端服务，占据当前终端进程，导致后续的osascript和前端启动命令完全无法执行。

方案1：当前终端跑后端，新标签跑前端 #

修改脚本，先通过osascript打开新标签并直接在新标签内执行前端启动命令，随后当前终端启动后端服务：

#!/bin/bash

# 请确保已正确赋值项目路径
# backend_dir="/path/to/your/backend"
# frontend_dir="/path/to/your/frontend"

# 打开新终端标签并执行前端启动命令
osascript -e "tell application \"Terminal\"" \
  -e "do script \"cd $frontend_dir && npm start\"" \
  -e "end tell"

# 当前终端启动后端服务
cd $backend_dir && npm run dev

方案2：当前终端跑前端，新标签跑后端 #

若需要调整运行位置，调换命令顺序即可：

#!/bin/bash

osascript -e "tell application \"Terminal\"" \
  -e "do script \"cd $backend_dir && npm run dev\"" \
  -e "end tell"

cd $frontend_dir && npm start

补充：针对VS Code集成终端的适配 #

如果你想在VS Code终端内打开新标签执行命令，可使用以下脚本（模拟快捷键操作并注入命令）：

#!/bin/bash

osascript -e "tell application \"Visual Studio Code\"" \
  -e "activate" \
  -e "tell application \"System Events\" to keystroke \"t\" using {command down}" \
  -e "delay 0.5" \
  -e "tell application \"System Events\" to keystroke \"cd $frontend_dir && npm start\"" \
  -e "tell application \"System Events\" to keystroke return" \
  -e "end tell"

cd $backend_dir && npm run dev

关键说明 #

你之前的osascript仅模拟快捷键打开新标签，但新标签默认只会加载当前Shell环境，不会自动执行命令。使用do script指令可直接在新标签中注入要执行的命令，实现一步到位。

内容的提问来源于stack exchange，提问作者Brian Barry