我正在尝试将应用程序部署到Heroku，但这是表示未检测到Node.js应用程序

我知道这是因为根目录中没有package.json文件。我在Client文件夹（使用vue-cli创建）和Server文件夹（nodejs / express）中有一个文件夹。我有webpack设置

我的问题是，我是否必须将其中之一移到项目的根目录中？如果是，哪一个？还是有一种方法可以将它们组合在一起？我是否只需要在根目录中运行一个npm init？

我完全感到困惑。

Heroku指南

目录结构

您可以使用任何一个打包文件，具体取决于您希望如何构建项目。重要的是Heroku根目录包含带有启动节点服务器的package.json脚本的start文件。 （Heroku的示例使用服务器的软件包。这意味着将您的Vue应用程序放置在server文件夹中，但是您不必这样做。）

我更喜欢将Node服务器文件夹放在Vue项目根目录内。然后，我将项目根目录用作Heroku根目录，并使用Vue的package.json启动应用程序。我假设您也使用此结构，并且您的服务器已准备好静态服务dist目录。

Vue CLI root
  > dist
  > node_modules
  > public
  v server
    package.json
  > src
  package.json  <-- Heroku will use this one for the `start` script

package.json

接下来，编辑Vue应用程序的package.json scripts部分以添加start脚本：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "start": "node server/index.js"
}

[您可以看到新的start脚本告诉Heroku下移到server目录并运行index.js，它是Node应用程序。

准备

• 将dist，server和package.json上载到Heroku的根目录。
• 除非您上载了npm install的package.json文件夹，否则您需要使用Heroku CLI来servers服务器的node_modules。
• 您不需要需在根目录中使用npm install Vue的package.json，因为Heroku仅在start脚本中需要它。

回顾

1. 将服务器文件夹放在Vue项目根目录中。
2. 编辑Vue项目的package.json以包括start脚本。
3. 将dist，server和package.json上传到Heroku。
4. 在Heroku上，在节点服务器目录中运行npm install。

注意：我想您可以根据需要上传src而不是dist，因为Heroku现在应该会自动运行build。我没有测试过，因为我使用下面的GitHub集成。

GitHub集成

您只需稍作修改即可使用Heroku的GitHub集成（这是我喜欢此目录结构的主要原因）。再次编辑Vue应用程序的package.json，并在新的start脚本之前或之后添加以下脚本：

"heroku-prebuild": "cd server/ && npm install"

现在，只要您提交到GitHub，就可以按一个按钮来部署新应用。这就是我的操作方式，永远不要使用Heroku CLI。

我正在尝试将应用程序部署到Heroku，但这是表示未检测到Node.js应用程序

我知道这是因为根目录中没有package.json文件。我在Client文件夹（使用vue-cli创建）和Server文件夹（nodejs / express）中有一个文件夹。我有webpack设置

我的问题是，我是否必须将其中之一移到项目的根目录中？如果是，哪一个？还是有一种方法可以将它们组合在一起？我是否只需要在根目录中运行一个npm init？

我完全感到困惑。

Heroku指南

目录结构

您可以使用任何一个打包文件，具体取决于您希望如何构建项目。重要的是Heroku根目录包含带有启动节点服务器的package.json脚本的start文件。 （Heroku的示例使用服务器的软件包。这意味着将您的Vue应用程序放置在server文件夹中，但是您不必这样做。）

我更喜欢将Node服务器文件夹放在Vue项目根目录内。然后，我将项目根目录用作Heroku根目录，并使用Vue的package.json启动应用程序。我假设您也使用此结构，并且您的服务器已准备好静态服务dist目录。

Vue CLI root
  > dist
  > node_modules
  > public
  v server
    package.json
  > src
  package.json  <-- Heroku will use this one for the `start` script

package.json

接下来，编辑Vue应用程序的package.json scripts部分以添加start脚本：

"scripts": {
  "serve": "vue-cli-service serve",
  "build": "vue-cli-service build",
  "lint": "vue-cli-service lint",
  "start": "node server/index.js"
}

[您可以看到新的start脚本告诉Heroku下移到server目录并运行index.js，它是Node应用程序。

准备

• 将dist，server和package.json上载到Heroku的根目录。
• 除非您上载了npm install的package.json文件夹，否则您需要使用Heroku CLI来servers服务器的node_modules。
• 您不需要需在根目录中使用npm install Vue的package.json，因为Heroku仅在start脚本中需要它。

回顾

1. 将服务器文件夹放在Vue项目根目录中。
2. 编辑Vue项目的package.json以包括start脚本。
3. 将dist，server和package.json上传到Heroku。
4. 在Heroku上，在节点服务器目录中运行npm install。

注意：我想您可以根据需要上传src而不是dist，因为Heroku现在应该会自动运行build。我没有测试过，因为我使用下面的GitHub集成。

GitHub集成

您只需稍作修改即可使用Heroku的GitHub集成（这是我喜欢此目录结构的主要原因）。再次编辑Vue应用程序的package.json，并在新的start脚本之前或之后添加以下脚本：

"heroku-prebuild": "cd server/ && npm install"

现在，只要您提交到GitHub，就可以按一个按钮来部署新应用。这就是我的操作方式，永远不要使用Heroku CLI。