在Heroku上部署Vue应用程序时出现意外的语法错误

Question

我有一个使用Vue CLI Webpack模板设置的Vue应用，并且我正尝试使用Node.js将其部署到Heroku。

1. 首先，我运行npm run build（使用webpack.prod文件构建），将所有文件都保存在dist/
2. 然后我运行git push heroku master进行部署

打开网页时出现错误。我注意到所有.js文件都已更改为包含与我的index.html相同的内容：

这是我的server.js文件：

var express = require('express');
var path = require('path');
var history = require('connect-history-api-fallback');

var app = express();

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

app.set('port',process.env.PORT||5000);

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

app.listen(app.get('port'), function () {
    console.log("App now running on port", app.get('port'));
});


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

为什么会这样，我该如何解决？

Answer 1

  

首先我运行npm run build…然后我运行git push heroku master进行部署”

除非您没有告诉我们一些信息，否则npm run build在这里没有任何用处。 git push适用于提交，但尚未提交您生成的dist/文件。

不过，自Heroku can build your application itself起，这可能还可以。在您的postinstall文件中添加一个package.json脚本，以告诉其操作方法：

"scripts": {
  "postinstall": "npm run build"
}

这假设您的构建实际上正在dist/中生成有效输出。如果那没有发生，那么还有第二个问题要解决。