时间戳

首页 > 解决方案 > 在 Heroku 上部署 Vue 应用程序时出现意外的语法错误

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

问题描述

我有一个使用 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'));
});

为什么会发生这种情况，我该如何解决？

标签： node.jsherokuvue.jswebpack

解决方案

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

除非你没有告诉我们什么，否则在npm run build这里没有任何用处。git push对提交进行操作，但您生成的dist/文件尚未提交。

不过，这可能没问题，因为 Heroku可以自己构建您的应用程序。将postinstall脚本添加到您的package.json文件中以告诉它如何：

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

这假定您的构建实际上是在dist/. 如果这没有发生，那么还有第二个问题需要处理。

推荐阅读