一键启动脚本
大家好，这节课呢我们来讲一下如何配置一键启动。
传统启动方式的问题
之前我们启动项目的话，需要：
启动后端服务
- 点击”终端”
- 然后新建一个终端
- 输入
cd backend进入到 backend 目录下面 - 然后执行
npm run dev
这样后端服务就启动起来了。
启动前端服务
启动前端的也一样：
- 我们需要先进入到客户端的目录
- 然后执行
npm run dev - 比如启动 H5 的话，就是
npm run dev:h5
这样每次启动项目都很麻烦，那么有没有更快速一点的方式呢？
使用 VS Code 启动配置
打开运行和调试
我们点击左侧的这个图标”运行和调试”。
我们看一下右边的文字：
要自定义运行和调试，创建 launch.json 文件。
这种方式呢，其实是 VS Code 原生自带的一种方式。因为我们用的编辑器 Cursor 是基于 VS Code 的。
使用 AI 生成启动脚本
我们让 AI 来帮我们写一下这个脚本文件。
编写提示词
先描述一下项目的情况：
当前目录下有两个文件夹：
1. account-backend - 是服务端，基于 Express
2. account-client - 是客户端，基于 uni-best
启动服务端的命令是：npm run dev
启动客户端的命令是：npm run dev:h5（客户端暂时使用 H5 来调试）
请帮我创建一个基于 VS Code 的 launch.json 脚本，
用来一键启动服务。
需要做三个启动项，分别是：
1. 单独启动服务端
2. 单独启动客户端
3. 一键启动客户端和服务端然后回车。
查看生成的脚本
我们现在来看一下这个脚本。
上面定义了一个 configurations，分别是：
- 启动服务端
- 启动客户端
然后下面还有一个叫 compounds，内部有一个 configuration，包含了启动服务端和启动客户端。
测试启动脚本
查看启动选项
我们直接看一下效果。
点击左侧的”运行和调试”，发现这里已经有了：
- 一键启动服务端和客户端
- 单独启动服务端
- 单独启动客户端
看起来没有什么问题，我们就点击”采纳”。
停止当前服务
然后试一下效果。
先用鼠标点击下方的终端，然后按 Ctrl + C 停止当前的终端命令。
同样也停止服务端的命令。
测试一键启动
然后试一下一键启动。
我们发现，服务端跟客户端都已经启动好了！
如果要停止服务的话，Ctrl + C 就行了。
测试分别启动
我们再来试一下分别启动服务端和客户端。
我们先启动服务端，然后再启动客户端。
我们发现，服务端跟客户端都启动成功了。
快速停止服务
如果要快速停止服务的话，也可以点击左侧的客户端和服务端右侧的这个停止的图标。
那现在服务端跟客户端都已经停止了。
提交启动脚本
launch.json 配置说明
配置文件位置
project-root/
└── .vscode/
└── launch.json配置文件结构
{
"version": "0.2.0",
"configurations": [
{
"type": "node-terminal",
"name": "启动服务端",
"request": "launch",
"command": "cd account-backend && npm run dev",
"cwd": "${workspaceFolder}"
},
{
"type": "node-terminal",
"name": "启动客户端",
"request": "launch",
"command": "cd account-client && npm run dev:h5",
"cwd": "${workspaceFolder}"
}
],
"compounds": [
{
"name": "一键启动服务端和客户端",
"configurations": ["启动服务端", "启动客户端"]
}
]
}配置项说明
| 字段 | 说明 |
|---|---|
type | 启动类型，这里使用 node-terminal |
name | 启动配置的名称，显示在调试面板 |
request | 请求类型，通常是 launch |
command | 要执行的命令 |
cwd | 工作目录，${workspaceFolder} 表示项目根目录 |
compounds | 组合启动配置，可以同时启动多个服务 |
启动方式对比
传统方式
# 需要开两个终端
# 终端 1
cd account-backend
npm run dev
# 终端 2
cd account-client
npm run dev:h5缺点：
- 需要手动输入命令
- 需要管理多个终端
- 每次都要重复操作
一键启动方式
- 点击”运行和调试”
- 选择”一键启动服务端和客户端”
- 点击启动按钮
优点：
- 一键启动所有服务
- 自动管理终端
- 可以快速停止服务
- 提高开发效率
使用技巧
1. 快捷键启动
可以使用快捷键 F5 快速启动上次选择的配置。
2. 停止服务
- 方法 1：在终端按
Ctrl + C - 方法 2：点击调试面板中的停止按钮
- 方法 3：使用快捷键
Shift + F5
3. 查看日志
启动后，可以在”调试控制台”或”终端”中查看服务的日志输出。
4. 自定义配置
可以根据需要添加更多的启动配置，比如：
- 启动测试环境
- 启动生产环境
- 启动数据库
- 运行测试脚本
常见问题
1. 启动失败
检查：
- 命令路径是否正确
- 依赖是否已安装
- 端口是否被占用
2. 无法停止服务
尝试：
- 关闭终端窗口
- 重启 VS Code
- 手动结束进程
3. 配置不生效
确认：
launch.json文件格式正确- 配置文件位于
.vscode目录下 - 重新加载窗口
遇到问题？
如果在配置启动脚本过程中遇到问题，可以扫描下方的微信二维码帮您看下（免费咨询）
下一步
一键启动脚本配置完成后，接下来我们需要：
