Question

我有一个简单的webpack模板vue应用程序，让我们说我有一个页面

http://localhost:8080/profile

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

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

Cannot GET /statement

可能是什么问题？

Answer 1

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

＆＃13;

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

＆＃13;

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

使用节点node server.js

运行此脚本

别忘了为生产构建你的应用程序;）！

Answer 2

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

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

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

2 个答案: