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

Posted 2023-03-13

【中文标题】刷新 vue 应用程序给出：Cannot GET /path

【英文标题】：Refresing a vue app gives: Cannot GET /path

【发布时间】：2018-06-24 22:55:18

【问题描述】：

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

的页面

http://localhost:8080/profile

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

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

Cannot GET /statement

可能是什么问题？

【参考方案1】：

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

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

【讨论】：

这似乎是正确的答案，你能提供答案吗？我的配置文件夹中有四个文件，我不知道要修改哪个

【参考方案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

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

【讨论】：

您确定您的代码有效吗？这是差异，在我进行设置之前和替换你的之后 i.imgur.com/xSFd14T.png 现在我的 heroku 服务器刚刚停止工作

另外，你有两次app.use(staticFileMiddleware); ...我不认为这个答案是正确的

没有错误，它是我在生产中多次使用的工作脚本，没有问题。更多关于此决定的说明：github.com/bripkens/connect-history-api-fallback/blob/master/…

出于某种原因，在第二次尝试时，您的代码有效。我想我错过了库connect-history-api-fallback，即使我在依赖项中的 package.json 上写了它并且 heroku 没有安装它......谢谢

@VladislavGritsenko 它工作并节省了时间。谢谢