三分钟，带你实现前端项目一键启动

大家好，我是大脸怪，今天给大家带来一个实用的开发技巧。

在前端项目中，我们在本地一般如何启动运行呢？

如今的前端项目，基本上都是已经工程化了，或使用 Webpack，或使用 Vite，当然，也有少数使用其他构建工具的

这类项目的启动方式基本都是依赖 npm 执行 package.json 下面的 scripts（本质都是在nodejs环境运行指定的入口文件），如以下方式：

cmd 复制代码

npm run serve

npm run dev

npm run start

在控制台敲指令执行，这看起来好像很酷，但实则有些繁琐，尤其是有些指令可能不容易记忆，每次执行都要翻看 package.json，很耽误时间

那有没有更简单的方式呢，当然有，在 vscode 项目目录的最下面有一栏 NPM脚本栏 ，这里列了当前项目 package.json 下的所有 scripts，点击运行图标就可以直接运行

也打开 package.json 文件鼠标浮入对应的指令，然后点击 运行脚本，效果跟上面是一样的

相信很多看到这的朋友可能会忍不住想吐槽，就这？就这？还以为是啥神仙技巧呢

当然不止于此，这虽然挺方便，也不容易出错，但是还不够方便，也不够极客，本地开发，使用最多的指令无非是启动服务，既然如此，有没有什么快捷键可以直接执行 npm run dev 或者 npm run start 呢，比如 F5 、ctrl + r，或者可以自定义

我找了一下，发现 vscode 并没有这样的配置项（如有朋友知道这样的配置项可在评论区告知），不过转念一想， F5 不是 debug 的快捷键吗，或许配置一下 debug 可以实现呢，开搞

创建 launch.json 文件，选择 Node.js 调试器

删除 program, 添加 runtimeExecutable 和 runtimeArgs，runtimeArgs 的第二项参数表示要执行的指令，如下：

launch.json

json 复制代码

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "一键启动",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "dev"],
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

然后我们按快捷键 F5，发现项目已经正常启动了，就是有几个问题:

控制台没有输出信息，不清楚有没有启动成功或者报错
运行指令不是在终端窗口，而是在调试控制台，很不习惯

我们再调整下 launch.json，添加 console 配置，最新配置如下：

launch.json

json 复制代码

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "一键启动",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "dev"],
      "console": "integratedTerminal",
      "skipFiles": ["<node_internals>/**"]
    }
  ]
}

integratedTerminal 的意思是使用 VS Code 的集成终端启动调试

再试一下，F5，发现项目已经在集成终端启动了，并且跟我们用指令执行基本一致

完美~

关注我，大脸怪将持续分享更多实用知识和技巧