- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我刚刚将我的网站放在 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 log --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 错误!缺少脚本:启动”
不知道该怎么办。
我在其他各种 StackOverflow 页面上尝试过有关此错误的解决方案:1)将 "scripts": { "start": "node app.js"}
添加到我的 package.json 的脚本部分,重新上传到 GitHub,重新部署。结果:“错误:找不到模块'/app/app.js'”
(毫不奇怪!)。
2) 将 "scripts": { "start": "npm runserve"}
添加到我的 package.json 的脚本部分,重新启动,重新部署。我认为 npm runserve
适用于本地服务器,为什么不尝试一下呢?结果:“sh:1:vue-cli-service:找不到//npm ERR!code ELIFECYCLE//npm ERR!syscall spawn”
3) 添加"scripts": { "start": "node server.js"}
。结果:错误:找不到模块“/app/server.js”
注意,我已经浏览了大约 4 个关于此错误的不同 StackOverflow 链接,但似乎没有任何内容相关(我什至尝试了一些解决方案,如上所示)。据我所知,它们都是针对此错误的其他版本。
如果this page包含一个解决方案,我不知道如何使它适合我的情况。 “index.js 是你的入口点”?在 VueJS 中,index.js 的等价物是什么?我的项目根目录只包含: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',
最佳答案
简单 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 上启用自动部署选项。第一次没有部署,因为没有新的推送。它将在选定分支上的每个下一个新推送时自动部署。
现在进行手动部署并从 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.
关于javascript - 尝试在 Heroku 上托管 VueJS 应用程序。在heroku日志中获取 "npm ERR! missing script: start",在我的页面上获取 "Application error",我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59657252/
我正在通过 labrepl 工作,我看到了一些遵循此模式的代码: ;; Pattern (apply #(apply f %&) coll) ;; Concrete example user=> (a
我从未向应用商店提交过应用,但我会在不久的将来提交。 到目前为止,我对为 iPhone 而非 iPad 进行设计感到很自在。 我了解,通过将通用PAID 应用放到应用商店,客户只需支付一次就可以同时使
我有一个应用程序,它使用不同的 Facebook 应用程序(2 个不同的 AppID)在 Facebook 上发布并显示它是“通过 iPhone”/“通过 iPad”。 当 Facebook 应用程序
我有一个要求,我们必须通过将网站源文件保存在本地 iOS 应用程序中来在 iOS 应用程序 Webview 中运行网站。 Angular 需要服务器来运行应用程序,但由于我们将文件保存在本地,我们无法
所以我有一个单页客户端应用程序。 正常流程: 应用程序 -> OAuth2 服务器 -> 应用程序 我们有自己的 OAuth2 服务器,因此人们可以登录应用程序并获取与用户实体关联的 access_t
假设我有一个安装在用户设备上的 Android 应用程序 A,我的应用程序有一个 AppWidget,我们可以让其他 Android 开发人员在其中以每次安装成本为基础发布他们的应用程序推广广告。因此
Secrets of the JavaScript Ninja中有一个例子它提供了以下代码来绕过 JavaScript 的 Math.min() 函数,该函数需要一个可变长度列表。 Example:
当我分别将数组和对象传递给 function.apply() 时,我得到 NaN 的 o/p,但是当我传递对象和数组时,我得到一个数字。为什么会发生这种情况? 由于数组也被视为对象,为什么我无法使用它
CFSDN坚持开源创造价值,我们致力于搭建一个资源共享平台,让每一个IT人在这里找到属于你的精彩世界. 这篇CFSDN的博客文章ASP转换格林威治时间函数DateDiff()应用由作者收集整理,如果你
我正在将列表传递给 map并且想要返回一个带有合并名称的 data.frame 对象。 例如: library(tidyverse) library(broom) mtcars %>% spl
我有一个非常基本的问题,但我不知道如何实现它:我有一个返回数据框,其中每个工具的返回值是按行排列的: tmp<-as.data.frame(t(data.frame(a=rnorm(250,0,1)
我正在使用我的 FB 应用创建群组并邀请用户加入我的应用群组,第一次一切正常。当我尝试创建另一个组时,出现以下错误: {"(OAuthException - #4009) (#4009) 在有更多用户
我们正在开发一款类似于“会说话的本”应用程序的 child 应用程序。它包含大量用于交互式动画的 JPEG 图像序列。 问题是动画在 iPad Air 上播放正常,但在 iPad 2 上播放缓慢或滞后
我关注 clojure 一段时间了,它的一些功能非常令人兴奋(持久数据结构、函数式方法、不可变状态)。然而,由于我仍在学习,我想了解如何在实际场景中应用,证明其好处,然后演化并应用于更复杂的问题。即,
我开发了一个仅使用挪威语的应用程序。该应用程序不使用本地化,因为它应该仅以一种语言(挪威语)显示。但是,我已在 Info.plist 文件中将“本地化 native 开发区域”设置为“no”。我还使用
读完 Anthony's response 后上a style-related parser question ,我试图说服自己编写单体解析器仍然可以相当紧凑。 所以而不是 reference ::
multicore 库中是否有类似 sapply 的东西?还是我必须 unlist(mclapply(..)) 才能实现这一点? 如果它不存在:推理是什么? 提前致谢,如果这是一个愚蠢的问题,我们深表
我喜欢在窗口中弹出结果,以便更容易查看和查找(例如,它们不会随着控制台继续滚动而丢失)。一种方法是使用 sink() 和 file.show()。例如: y <- rnorm(100); x <- r
我有一个如下所示的 spring mvc Controller @RequestMapping(value="/new", method=RequestMethod.POST) public Stri
我正在阅读 StructureMap关于依赖注入(inject),首先有两部分初始化映射,具体类类型的接口(interface),另一部分只是实例化(请求实例)。 第一部分需要配置和设置,这是在 Bo
我是一名优秀的程序员,十分优秀!