结合Express 4和Vue CLI 3

Question

我用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（Backend）运行服务器并从前端服务dist/，但问题是我选择的托管服务只是在根文件夹上运行npm install，这没有用，因为我需要“Express”（以及其他一些）包运行服务器。由于它不在根文件夹中，因此它不会安装任何软件包，显然无法运行。

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

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

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

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

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

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

在此先感谢您的帮助。

Answer 1

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

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

Answer 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 })
})