使用Watchify/Browserify/vueify的npm Dev脚本编译Vue组件时Express服务器无法启动

看起来你的核心问题出在Windows命令行的命令执行逻辑上——你原来的dev脚本应该是用&&把watchify编译命令和Express启动命令串起来了对吧？在Windows的cmd/PowerShell里，&&是串行执行：只有前面的命令完全结束（进程退出），才会执行后面的命令。但watchify是持续运行的监听进程，会一直占据终端，永远不会退出，所以后面的Express启动命令根本没机会执行。

而你单独执行npm start和编译命令都正常，说明服务器代码、Vue编译配置本身都没问题，只是脚本的执行方式不对。

解决步骤： #

1. 安装跨平台的并行命令工具

我们需要用工具让两个持续运行的进程并行执行，推荐用concurrently或者npm-run-all，两者都是跨平台的，Windows下也能正常工作。

以concurrently为例，先安装它作为开发依赖：

npm install --save-dev concurrently

2. 拆分并修改package.json的scripts

把编译、监听、启动服务器的命令拆成单独的脚本，再用并行工具同时运行：

{
  "scripts": {
    "start": "node ./bin/www", // 你的原有启动命令
    "build:vue": "browserify -t vueify -e public/javascripts/main.js -o public/javascripts/bundle.js", // 单次编译命令
    "watch:vue": "watchify -t vueify -e public/javascripts/main.js -o public/javascripts/bundle.js -v", // 监听热重载命令
    "dev": "concurrently \"npm run watch:vue\" \"npm start\"" // 并行运行两个命令
  }
}

3. 测试运行

执行npm run dev，现在watchify会持续监听Vue文件变化，同时Express服务器也会正常启动，两者互不阻塞。

备选方案：用npm-run-all #

如果你更喜欢npm-run-all，安装方式：

npm install --save-dev npm-run-all

然后修改dev脚本：

"dev": "npm-run-all --parallel watch:vue start"

额外注意点 #

• 如果你之前的dev脚本是用&（Windows下后台运行），但watchify的热重载可能会因为后台运行丢失终端输出或者出现异常，用专门的并行工具更可靠。
• 确保你的watch:vue命令里加了-v参数（verbose），这样可以看到编译日志，方便确认热重载是否正常工作。

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