端口错误：heroku 中的 vue.js+node.js 项目

尝试部署我的全栈项目。在本地，它构建并运行良好，但在 Heroku 中，在“git push heroku master”命令和自动构建之后，我收到应用程序错误 - 503 服务不可用。看起来有不同的端口，或者根文件夹的路径可能不正确，其中是index.html

我的 vue.js 配置/index.js

'use strict'

const path = require('path')

module.exports = {
  dev: {
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},
    port: 80,
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false,
    useEslint: true,
    showEslintErrorsInOverlay: false,
    devtool: 'cheap-module-eval-source-map',
    cacheBusting: true,
    cssSourceMap: true
  },

  build: {
    index: path.resolve(__dirname, '../dist/index.html'),
    assetsRoot: path.resolve(__dirname, '../dist'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    productionSourceMap: true,
    devtool: '#source-map',
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],
    bundleAnalyzerReport: process.env.npm_config_report
  }
}

我的package.json

...    
"scripts": {
   "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
   "postinstall": "nodemon app.js",
   "start": "npm run build",
   "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
   "e2e": "node test/e2e/runner.js",
   "test": "npm run unit && npm run e2e",
   "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
   "build": "node --optimize_for_size --max_old_space_size=2048 --gc_interval=100 build/build.js"
},
...

还有 app.js，我将“dist”定义为文件夹，应用程序应在其中获取主 index.html - 'app.use(express.static('dist'))'

const express = require('express');
const path = require('path');
const favicon = require('serve-favicon');
const morgan = require('morgan');
const bodyParser = require('body-parser');

const book = require('./api/routes/book');
const doingsRoutes = require('./api/routes/doings');
const targetsRoutes = require('./api/routes/targets');
const topsRoutes = require('./api/routes/tops');
const usersRoutes = require('./api/routes/users');
const app = express();

const mongoose = require('mongoose');
mongoose.Promise = require('bluebird');
mongoose.connect(
  'mongodb://nodejs-rest:' +
    'nodejs-rest' +
    '@nodejs-rest-shard-00-00-vwe6k.mongodb.net:27017,nodejs-rest-shard-00-01-vwe6k.mongodb.net:27017,nodejs-rest-shard-00-02-vwe6k.mongodb.net:27017/test?ssl=true&replicaSet=nodejs-rest-shard-0&authSource=admin',
  {
    promiseLibrary: require('bluebird')
  }
);

app.use(morgan('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({'extended':'false'}));

app.use('/api/doings', doingsRoutes);
app.use('/api/targets', targetsRoutes);
app.use('/api/tops', topsRoutes);
app.use('/api/users', usersRoutes);
app.use(function(req, res, next) {
  const err = new Error('Not Found');
  err.status = 404;
  next(err);
});
app.set("port", process.env.PORT || 80);
if (process.env.NODE_ENV === 'production') {
  console.log('dist')
  app.use(express.static('dist'));
}
app.listen(app.get("port"), () => {
  console.log(`Find the server at: ${app.get("port")}`); 
});
app.use(function(err, req, res, next) {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  res.status(err.status || 500);
  res.sendFile(path.join(__dirname, '../dist', 'index.html'));
});

app.set('view engine', 'html');

您需要在应用程序的根文件夹中添加带有express的server.js文件和入口路由（在package.json/index.html所在的同一文件夹中）。我在heroku上也有一个vue应用程序，这不是很难。

// server.js
const express = require('express')
const path = require('path')
const history = require('connect-history-api-fallback')

const app = express()

const staticFileMiddleware = express.static(path.join(__dirname + '/dist'))

app.use(staticFileMiddleware)
app.use(history({
  disableDotRule: true,
  verbose: true
}))
app.use(staticFileMiddleware)

app.get('/', function (req, res) {
  res.render(path.join(__dirname + '/dist/index.html'))
})

var server = app.listen(process.env.PORT || 8080, function () {
  var port = server.address().port
  console.log('App now running on port', port)
})