Неожиданная синтаксическая ошибка при развертывании приложения Vue в Heroku

Question

У меня было настроено приложение Vue с шаблоном веб-пакета Vue CLI, и я пытался развернуть его в Heroku с помощью Node.js.

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 может создать само приложение . Добавьте скрипт postinstall в ваш файл package.json, чтобы сообщить ему, как:

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

Предполагается, что ваша сборка действительно генерирует действительный вывод в dist/. Если этого не происходит, возникает вторая проблема.