刷新 vue 应用程序给出：Cannot GET /path

Question

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

的页面

http://localhost:8080/profile

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

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

Cannot GET /statement

可能是什么问题？

Answer 1

我认为您的 vue-router 处于 HTML5 历史模式。 https://router.vuejs.org/en/essentials/history-mode.html

在开发模式下，webpack-dev-server 为您处理重定向，但您需要配置生产中使用的服务器以重定向您的路由。

Answer 2

您尝试使用没有后端的路由器的历史模式。 为了让事情顺利进行，您可以使用 Express JS。以前的答案对我不起作用，我编写了自己的服务器脚本。 这是用于以历史模式运行 Vue 应用程序的 my 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 server.js

不要忘记为生产构建应用程序；)！