嘗試在 Heroku 上托管 VueJS 應用程序。 在 Heroku 日志中獲取“npm ERR！缺少腳本：啟動”，並在我的頁面上獲取“應用程序錯誤”

Question

我只是把我的網站放在 Heroku 上。 預期結果：我的 VueJS 應用程序“Twitter Clone”的實時版本。 通過將我的 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！缺少腳本：開始”

不知道該怎么辦。

我從其他各種 StackOverflow 頁面嘗試過的關於此錯誤的解決方案：1) 將"scripts": { "start": "node app.js" }到我的 package.json 的腳本部分，重新​​上傳到 GitHub，重新部署。 結果： "Error: Cannot find module '/app/app.js'" （ "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 個關於此錯誤的不同 StackOverflow 鏈接，似乎沒有任何相關性（我什至嘗試了一些解決方案，如上所示）。 據我所知，它們都是針對此錯誤的其他版本。

如果此頁面包含解決方案，我不知道如何使其適用於我的情況。 “index.js 是你的切入點”？ VueJS 相當於 index.js 是什么？ 我的項目根目錄只包含：App.vue、db.js、main.js、index.html（在public文件夾下）和一些配置文件。

發送幫助！ 提前感謝所有閱讀本文的人。

編輯：按照穆賈揚的建議，我現在得到：

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',

Answer 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"
  },

Answer 2

簡單 4 步：在 Heroku 上自動部署 Vue.js 應用程序

我正在尋找以最佳方式在 Heroku 上部署我的 Vue.js 應用程序。 找到了在 Heroku 上部署 Vue.js 應用程序的舊文章。 在這里，我寫這篇文章是為了通過持續集成交付部署您的 Vue.js 應用程序，並在 Heroku 上部署您的 Vue.js 應用程序。

先決條件：

npm 基礎知識 git 基礎知識 Vue.js 基礎知識 本教程涵蓋的主題：

創建一個 Vue.js 項目

配置 Vue.js 應用程序以在本地為 express 服務器上的應用程序提供應用程序 在 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. 配置應用程序以在本地在 express 服務器上提供服務

返回終端並使用 ctrl+c 命令停止運行應用程序。

現在安裝 express 並添加一個 server.js 文件來為 Vue.js 應用程序提供服務

npm install express serve-static --save

在您的項目名稱目錄下創建一個 server.js 文件，它應該如下所示：

添加以下腳本以在 server.js 文件中的快速靜態服務器上為您的應用程序提供服務。

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