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

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

通过某种方式，我设法通过在后端文件夹的npm上安装webpack，将其配置为捆绑Express应用程序并将捆绑包和dist/从前端复制到根项目的文件夹中，然后在根级npm：

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

，然后将根dist/推入托管服务，虽然有点奏效，但它“很麻烦”且不是最佳选择，甚至更多，因为我每次都需要在本地计算机上构建它，并且然后上传。如果我能以某种方式利用根npm的软件包在托管服务上构建前端和后端，那就太好了，但是我相信这里的版本控制是另一个问题，因为两者将共享相同的npm软件包。

对此有更好的解决方案吗？

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

谢谢您的帮助。

Answer 1

您应该尝试Lerna。它允许您在一个存储库（或一个文件夹）中包含多个js项目，在根文件夹中带有package.json，您可以在其中添加脚本以与所有项目交互。

例如，您应该能够添加一个开始脚本，该脚本将进入您的differents apps文件夹中，并在运行/构建这些项目时安装依赖项。

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

结合Express 4和Vue CLI 3

2 个答案: