结合 Express 4 和 Vue CLI 3答案

【问题标题】：Combining Express 4 and Vue CLI 3结合 Express 4 和 Vue CLI 3
【发布时间】：2019-03-06 14:27:08
【问题描述】：

我使用 Vue CLI 3 和 Express 4 构建了一个项目，目前进展顺利，因为我将后端服务器放在一个文件夹中，将前端服务器放在另一个文件夹中，但现在我试图同时部署两者都停止了在单个节点托管服务上。让我稍后再讲。

到目前为止我的项目结构：

Project:
  - node_modules/
  - package.json

Project/Frontend (Vue CLI 3):
  - node_modules/
  - package.json
  - app.js
  - dist/
  - <other folders like "public","tests","src",etc>        

Project/Backend (Express 4):
  - node_modules/
  - package.json
  - app.js
  - <other folders like "controllers" and stuff>

现在，问题是我需要将两者结合在一个 Node 应用程序中，以便将其部署在托管服务上。

我想让 Express（后端）运行服务器并从前端提供 dist/，但问题是我选择的托管服务仅在根文件夹上运行 npm install，即没有帮助，因为我需要“Express”（和其他一些）包来运行服务器。由于不在根目录下，所以没有安装任何包，显然无法运行。

我创建了一个根级别的 npm 配置来尝试编译前端，然后将 dist/ 复制到 Express 后端。但是由于托管服务除了根 npm 配置之外没有安装任何东西，cd'ing 进入前端然后构建失败，因为它错过了node_modules。

我设法通过在后端文件夹的 npm 上安装 webpack 来完成这项工作，将其配置为捆绑 Express 应用程序并从根项目文件夹中的前端复制捆绑包和 dist/，然后在根目录上运行-级别 npm：

cd frontend && npm run build && cd ../backend && webpack

然后将根dist/ 推送到托管服务，这有点工作，但它“繁琐”并且不是最佳的，更重要的是因为我需要每次都在本地计算机上构建它并且只有那时上传。如果我能以某种方式利用根 npm 的包在托管服务上构建前端和后端，那就太好了，但我相信这里的版本控制是另一个问题，因为它们将共享相同的 npm 包。

有没有更好和/或更清洁的解决方案？

如果缺少任何细节，请告诉我。

提前感谢您的帮助。

【问题讨论】：

标签： node.js express npm vue-cli-3

【解决方案1】：

你应该试试Lerna。它允许您在一个 repo（或一个文件夹）中拥有多个 js 项目，而 package.json 在根文件夹中，您可以在其中添加脚本以与所有项目进行交互。

例如，您应该能够添加一个启动脚本，该脚本将进入您的不同应用程序文件夹，安装您的依赖项并运行/构建这些项目。

【讨论】：

【解决方案2】：

您可以使用同时运行npm install 的脚本，构建前端并运行后端。

const resolve = require('path').resolve
const cp = require('child_process')

const frontend = resolve(__dirname, 'Frontend')
const backend = resolve(__dirname, 'Backend')

cp.exec('npm install', { env: process.env, cwd: frontend }, () => {
  cp.exec('npm run build', { env: process.env, cwd: frontend })
})

cp.exec('npm install', { env: process.env, cwd: backend }, () => {
  cp.exec('npm run start', { env: process.env, cwd: backend })
})

【讨论】：