尝试在 Heroku 上托管 VueJS 应用程序。在 heroku 日志中获取“npm ERR！缺少脚本：开始”，在我的页面上获取“应用程序错误”

Posted 2023-02-22

【中文标题】尝试在 Heroku 上托管 VueJS 应用程序。在 heroku 日志中获取“npm ERR！缺少脚本：开始”，在我的页面上获取“应用程序错误”

【英文标题】：Trying to host a VueJS app on Heroku. Getting "npm ERR! missing script: start" in heroku logs and "Application error" on my page

【发布时间】：2020-04-26 15:53:13

【问题描述】：

我只是把我的网站放在 Heroku 上。预期结果：我的 VueJS 应用程序“Twitter 克隆”的实时版本。数据是通过将我的 GitHub 同步到 Heroku 获得的。

现在我有一个问题。

https://rolys-twitter-clone.herokuapp.com/这是我的网站，没有太多可看的，因为有错误信息

上面写着：

An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command heroku logs --tail

所以我进入了我的应用程序的 heroku 日志（通过在 cmd 中输入“heroku logs --tail --app my-app-name”，任何想知道如何检查它们的人）......我发现了错误消息.

我得到的具体错误隐藏在这个日志数据中：

2020-01-09T04:17:41.201106+00:00 heroku[web.1]: Starting process with command `npm start`
2020-01-09T04:17:44.040787+00:00 heroku[web.1]: State changed from starting to crashed
2020-01-09T04:17:43.902074+00:00 app[web.1]: npm ERR! missing script: start
2020-01-09T04:17:43.921370+00:00 app[web.1]:
2020-01-09T04:17:43.925728+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2020-01-09T04:17:43.926046+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2020-01-09T04_17_43_903Z-debug.log
2020-01-09T04:17:44.002368+00:00 heroku[web.1]: Process exited with status 1

“npm ERR！缺少脚本：开始”

不知道该怎么办。

我从其他各种 *** 页面尝试过关于此错误的解决方案： 1）将"scripts": "start": "node app.js" 添加到我的package.json的脚本部分，重新​​上传到GitHub，重新部署。结果："Error: Cannot find module '/app/app.js'"（不足为奇！）。

2) 将"scripts": "start": "npm run serve" 添加到我的 package.json 的脚本部分，重新​​启动，重新部署。我认为npm run serve 适用于本地服务器，为什么不试试呢？结果："sh: 1: vue-cli-service: not found // npm ERR! code ELIFECYCLE // npm ERR! syscall spawn "

3) 添加"scripts": "start": "node server.js" 。结果：Error: Cannot find module '/app/server.js'

请注意，我已经浏览了大约 4 个关于此错误的不同 *** 链接，但似乎没有什么相关的（我什至尝试了一些解决方案，如上所示）。据我所知，它们都是针对此错误的其他版本的。

如果this page 包含解决方案，我不知道如何使它适合我的情况。 “index.js 是你的入口点”？ index.js 的 VueJS 等价物是什么？我项目的根目录只包含：App.vue、db.js、main.js、index.html（在public文件夹下）和一些配置文件。

发送帮助！提前感谢所有阅读本文的人。

编辑：按照 Muljayan 的建议，我现在得到：

2020-01-09T06:43:41.857621+00:00 heroku[web.1]: Starting process with command `npm start`
2020-01-09T06:43:44.546969+00:00 heroku[web.1]: State changed from starting to crashed
2020-01-09T06:43:44.413480+00:00 app[web.1]:
2020-01-09T06:43:44.413503+00:00 app[web.1]: > twitter-clone@0.1.0 start /app
2020-01-09T06:43:44.413505+00:00 app[web.1]: > node server.js
2020-01-09T06:43:44.413506+00:00 app[web.1]:
2020-01-09T06:43:44.466287+00:00 app[web.1]: internal/modules/cjs/loader.js:796
2020-01-09T06:43:44.466291+00:00 app[web.1]: throw err;
2020-01-09T06:43:44.466294+00:00 app[web.1]: ^
2020-01-09T06:43:44.466296+00:00 app[web.1]:
2020-01-09T06:43:44.466300+00:00 app[web.1]: Error: Cannot find module '/app/server.js'
2020-01-09T06:43:44.466302+00:00 app[web.1]: at Function.Module._resolveFilename (internal/modules/cjs/loader.js:793:17)
2020-01-09T06:43:44.466304+00:00 app[web.1]: at Function.Module._load (internal/modules/cjs/loader.js:686:27)
2020-01-09T06:43:44.466306+00:00 app[web.1]: at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
2020-01-09T06:43:44.466308+00:00 app[web.1]: at internal/main/run_main_module.js:17:11 
2020-01-09T06:43:44.466311+00:00 app[web.1]: code: 'MODULE_NOT_FOUND',

【问题讨论】：

运行 node server.js 会让你的应用在 localhost 上运行良好吗？

我实际上不知道如何回答您的问题——我只使用“npm run serve”或 vue CLI 界面在 localhost 上运行该应用程序。我是否只需进入 /my-apps-root-directory 并输入“node server.js”？ （我只是在脚本部分测试了“node server.js”）

【参考方案1】：

安装 express 在根文件夹的 server.js 中添加如下代码

const express = require('express');
const app = express();

// Serve all the files in '/dist' directory
app.use(express.static('dist'));


app.listen(3000, function () 
  console.log('Example app listening on port 3000!');
);

在你的 package.json 中添加以下脚本

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

【讨论】：

我做对了吗？现在它说：Error: Cannot find module '/app/server.js' 这是我的根目录的图片，根目录中有 server.js，正如你所说：imgur.com/a/7Q2EYI3

【参考方案2】：

简单的 4 步：在 Heroku 上自动部署 Vue.js 应用

我正在寻找以最佳方式在 Heroku 上部署我的 Vue.js 应用程序。找到了在 Heroku 上部署 Vue.js 应用程序的旧文章。在这里，我写这篇文章是为了通过持续集成交付部署您的 Vue.js 应用程序，并在 Heroku 上部署您的 Vue.js 应用程序。

先决条件：

npm 基础知识 基本的 git 知识 基本的 Vue.js 知识 本教程涵盖的主题：

创建一个 Vue.js 项目

配置 Vue.js 应用程序以在本地快速服务器上提供应用程序 在 GitHub 上创建一个 git 存储库并推送您的代码 创建和配置 Heroku 应用 使用 GitHub 配置 Vue.js 项目和 Heroku 应用程序，以便 Heroku 可以在每次新推送时为我们的应用程序提供服务

第 1 步。创建 Vue.js 项目

如果你本地没有 Vue。首先安装 Vue.js（此处的说明）。我们还需要 Vue 的 CLI 来轻松创建项目。我相信，你已经熟悉 npm 包管理器了：

npm install vue
npm install -g @vue/cli
vue create <YOUR-PROJECT-NAME>
cd <YOUR-PROJECT-NAME>
npm install
npm run serve

现在您的项目应该在 localhost:8080 启动并运行

第 2 步：将应用配置为在本地快速服务器上提供服务

返回终端并使用 ctrl+c 命令停止运行应用程序。

现在安装 express 并添加一个 server.js 文件来服务 Vue.js 应用程序

npm install express serve-static --save

在 YOUR-PROJECT-NAME 目录下创建一个 server.js 文件，它应该如下所示：

在 server.js 文件中添加以下脚本以在 express 静态服务器上为您的应用提供服务。

const express = require('express')
const serveStatic = require('serve-static')
const path = require('path')

const app = express()

//here we are configuring dist to serve app files
app.use('/', serveStatic(path.join(__dirname, '/dist')))

// this * route is to serve project on different page routes except root `/`
app.get(/.*/, function (req, res) 
    res.sendFile(path.join(__dirname, '/dist/index.html'))
)

const port = process.env.PORT || 8080
app.listen(port)
console.log(`app is listening on port: $port`)

现在我们可以运行我们的 server.js 文件来测试我们在配置端口上运行的应用程序。

Note: before running server.js. we must need to build our vue.js app to create dist dir

npm run build

您的 dist 目录应该已构建并准备好服务。

运行以下命令在本地测试您的 server.js 文件

node server.js

在浏览器上进行测试，在 localhost:8080 导航

现在编辑你的 package.json 文件，告诉 heroku 从你的 server.js 文件中提供应用程序。

"scripts": 
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "start": "node server.js" <--- add this line under scripts block
  ,

您现在在本地完成了您的项目。这里没有更多的工作。

第 3 步。在 GitHub 上创建一个 git 存储库并推送您的代码

GitHub is a Git repository hosting service, but it adds many of its own features. 
While git is a command line tool, GitHub provides a Web-based graphical interface. 
It also provides access control and several collaboration features, such as a wikis 
and basic task management tools for every project.

在 GitHub 上创建一个 git 存储库并使用您创建的项目进行设置

setup remote GitHub repository in your project terminal using command as follows:

git remote add origin https://github.com/<your-user-name>/<repo-name>.git

将您的代码推送到 GitHub

Tip: Don’t forget saving all edited files before pushing on GitHub.

git push -u origin master

酷！ ? 你现在应该在 GitHub 上有你的源代码了。

第 4 步：创建和配置 Heroku 应用

Heroku is a cloud platform as a service. That means you do not have to worry 
about infrastructure; you just focus on your application. ... Full Logging and 
Visibility - easy access to all logging output from every component of your app
and each process.

在 Heroku 上创建一个应用（如果您还没有帐户，请注册一个。）

这是添加新应用的片段：

创建应用后，它会将您重定向到 Heroku 仪表板上的应用部署选项卡。

如果您尚未连接 Heroku 帐户，请将其连接到 GitHub。 在部署方法下选择连接到 GitHub 选项 搜索你的仓库名称，搜索成功后，你的GitHub仓库应该如下：

连接到它并在 Heroku 上启用自动部署选项。第一次它没有部署，因为没有新的推送。它将在所选分支的每次下一次新推送时自动部署。

现在进行手动部署并从 Heroku 仪表板打开您的应用程序。

赞！！！ ?你终于完成了。

如果部署成功，测试你项目的 URL https://.herokuapp.com 就大功告成了！

I hope this tutorial was helpful to anyone looking to auto deploy your Vue.js app from GitHub to heroku on every new push.

来源：https://www.codementor.io/@ravianand1988/easily-4-steps-to-continuous-delivery-auto-deploy-vue-js-app-on-heroku-xljk977pq

【讨论】：

伙计，这非常有效，非常感谢，我不知道他们为什么不接受这个答案！