刷新Vue应用程序会给出：无法获取/ path

Question

我有一个简单的webpack模板vue应用，假设我有一个页面

http://localhost:8080/profile

在我的本地页面上，我可以从任何页面转到/ profile，甚至在/ profile上一次，我都可以刷新/重新加载页面，并且没有任何错误。

但是我将应用程序部署在heroku上，即使我可以从任何页面导航到其他页面，但是例如如果我在/ profile页面上，并且点击了刷新，我就会

Cannot GET /statement

可能是什么问题呢？

Answer 1

您尝试使用没有后端的路由器的历史记录模式。为了使事情顺利进行，您可以使用Express JS。先前的答案对我不起作用，我编写了自己的服务器脚本。这是我的以历史记录模式运行Vue应用程序的server.js。server.js（使用Express）：

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);
});

将此文件放在项目的根目录中（而不是src）。

使用Node运行此脚本： node server.js

不要忘记构建用于生产的应用程序;）！