使用 Vue-cli / Webpack 在一个命令中启动客户端和服务器答案

【问题标题】：Start client and server in one command using Vue-cli / Webpack使用 Vue-cli / Webpack 在一个命令中启动客户端和服务器
【发布时间】：2018-08-13 03:21:53
【问题描述】：

我正在使用 Vue-cli 3 部署 Vue 客户端，它使用 Webpack
（我可以通过调用"yarn dev --open"来启动客户端）
我也在为客户端编写一个带有 API 的服务器
（我可以通过调用"node server/server.js"来启动服务器）

有没有办法用一个命令同时启动客户端和服务器？
我在想我应该在vue.config.js 中添加一些代码，以便在编译客户端之前启动服务器。

最好这一切都以热重载的方式工作。

到目前为止，我按照 Alex78191 的建议尝试了一个 shell 脚本：

#!/usr/bin/env bash

node server/server.js &
yarn dev --open

这可行，但是当我尝试使用 ctrl-C 停止服务器时，只有纱线进程停止，但节点服务器继续运行。 bash 中有没有办法使用 ctrl-C 命令停止所有已启动的进程（后台和前台）？

【问题讨论】：

你可以创建shell脚本。
基本上yarn dev --open; node server/server.js
您使用的脚本也可以正常工作，但不会打开任何东西，因为它在后台运行，最后一个& 字符用于在后台运行进程。尝试删除此字符
是什么让你认为客户端是从命令行启动而不是从脚本启动的？您在两种情况下都使用相同的命令，应该没有区别。唯一的区别是&，这意味着脚本不会等待此命令完成以启动下一个。
你说得对，我可以从 bash 脚本启动这两个命令。我剩下的唯一问题（请参阅我的最新编辑）是后台进程不容易停止（使用 ctrl-C）并且需要在 Windows-10 中进行大量工作才能停止。

标签： javascript node.js bash webpack vue.js

【解决方案1】：

我能够使用以下 bash 脚本来完成这项工作：

#!/usr/bin/env bash

node server/server.js &
pid=$!

yarn dev --open

trap "kill ${pid}; exit 1" INT

此脚本比您预期的要复杂一些，以确保在此脚本停止时所有子进程都停止（使用 ctrl-C）。有关停止子进程的更多信息，我在这里找到了一些帮助：how-can-bash-script-do-the-equivalent-of-ctrl-c-to-a-background-task

【讨论】：