刷新 vue 应用程序给出：无法获取/路径

Question

我有一个简单的 webpack 模板 vue 应用程序，假设我有一个包含

的页面

http://localhost:8080/profile

在我的本地页面上，我可以从任何页面转到 /profile，甚至在 /profile 上一次，我可以 refresh/reload 该页面并且我没有收到任何错误。

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

Cannot GET /statement

可能是什么问题？

Answer 1

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

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

Answer 2

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

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

不要忘记构建您的生产应用 ;)！

刷新 vue 应用程序给出：无法获取/路径

Refresing a vue app gives: Cannot GET /path

javascript

heroku

vue.js

vue-router

vuejs2