我下载了以下源代码,在本地运行并可以正常运行 https://vuejsexamples.com/weekly-todo-list-in-vue-js/
(通过Github)上传工作正常,但是,当我加载页面时,显示应用程序错误。
Heroku给我以下错误。我什至不知道如何访问以下日志文件。有人知道吗?
2018-08-25T20:14:40.966872 + 00:00 app [web.1]:npm错误!
/app/.npm/_logs/2018-08-25T20_14_40_957Z-debug.log 2018-08-25T20:14:41.322064 + 00:00 heroku [router]:at =错误代码= H10 desc =“应用程序崩溃”方法=获取路径=“ /”主机= xxx-app.herokuapp.com request_id = aa2b7d48-198f-4fd1-b83e-70c92fc06ac6 fwd =“ 84.82.96.205” dyno = connect = service = status = 503字节= protocol = https
答案 0 :(得分:0)
Heroku要求您设置一个应用服务器(HTTP服务器)来为您提供静态文件。每周待办事项不执行此操作。
我可以提供3种解决方案:添加Web服务器并更改构建过程,提取应用程序构建并将其与服务器分开部署,使用webpack-dev-server作为Heroku上的服务器。
将其内置到后安装脚本
中// package.json
scripts: {
// omited ...
"postinstall": "yarn run build",
// omitted...
},
更改开始 npm脚本
// package.json
scripts: {
// omited ...
"start": "node server.js",
// omitted...
},
有些软件包应该从 devDependencies 移到 dependencies ,因为我们将在Heroku上构建应用程序,而Heroku在生产环境中做到了这一点。 这非常繁琐,因此您可以将devDependencies移入依赖项。但这会增加不必要的深度。进入您的构建。
安装Express.JS依赖项:
$ yarn add express
在repo的根目录中,使用将为应用程序静态文件提供服务的应用程序服务器代码创建server.js文件:
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/dist'));
const port = process.env.PORT || 5000;
app.listen(port);
提交所有更改并将其推送到Heroku
$ git push heroku master
从仓库中进行构建:
$ yarn run build
创建新的存储库并复制dist
目录。不要忘记将node_modules/
添加到.gitignore。
初始化新的package.json:
$ npm init -y
添加启动npm脚本;
// package.json
scripts: {
"start": "node server.js",
// omitted...
},
安装Express.JS依赖项:
$ yarn add express
在repo创建server.js文件的根目录中,其中包含将为应用程序静态文件提供服务的应用程序服务器代码,与先前解决方案中的服务器相同:
const express = require('express');
const app = express();
app.use(express.static(__dirname + '/dist'));
const port = process.env.PORT || 5000;
app.listen(port);
您应该具有以下项目结构:
.
├── dist
│ ├── index.html
│ └── static
│ ├── css
│ │ ├── app.c0fc4ae18c0c95b09c1cb7ceb99d491f.css
│ │ └── app.c0fc4ae18c0c95b09c1cb7ceb99d491f.css.map
│ ├── fonts
│ │ ├── icons.674f50d.eot
│ │ ├── icons.af7ae50.woff2
│ │ ├── icons.b06871f.ttf
│ │ └── icons.fee66e7.woff
│ ├── img
│ │ ├── flags.9c74e17.png
│ │ └── icons.912ec66.svg
│ └── js
│ ├── app.88670f817a4b11e940e6.js
│ ├── app.88670f817a4b11e940e6.js.map
│ ├── manifest.304e67c5c14ed63ee160.js
│ ├── manifest.304e67c5c14ed63ee160.js.map
│ ├── vendor.434b5723496264d2da17.js
│ └── vendor.434b5723496264d2da17.js.mapo
├── package-lock.json
├── package.json
└── server.js
提交代码并将其推送到Heroku。
如here所述,您可以使用 webpack-dev-server 来服务您的应用。但这是极不推荐用于生产应用程序的。
将webpack开发服务器配置添加到webpack.prod.conf.js:
// ..omitted
devtool: config.build.productionSourceMap ? config.build.devtool : false,
+ devServer: {
+ disableHostCheck: true,
+ clientLogLevel: 'warning',
+ historyApiFallback: true,
+ hot: false,
+ host: '0.0.0.0',
+ port: process.env.PORT || config.dev.port,
+ open: false,
+ overlay: false,
+ publicPath: config.dev.assetsPublicPath,
+ proxy: config.dev.proxyTable,
+ quiet: true // necessary for FriendlyErrorsPlugin
+ },
output: {
// ..omitted
更改开始npm脚本:
// package.json
scripts: {
// omited ...
"start": "webpack-dev-server --port $PORT --host 0.0.0.0 --config build/webpack.prod.conf.js",
// omitted...
},
有些软件包应该从 devDependencies 移到 dependencies ,因为我们将在Heroku上构建应用程序,而Heroku在生产环境中做到了这一点。 这非常繁琐,因此您可以将devDependencies移入依赖项。但这会增加不必要的深度。进入您的构建。
提交更改并推送到Heroku。
Heroku喜欢package.json中严格的引擎规格。我建议您指定Node.JS和NPM的显式版本:
"engines": {
- "node": ">= 8.0.0",
- "npm": ">= 5.0.0"
+ "node": "8.11.4",
+ "npm": "5.6.0"
},