页面刷新时的Vue路由器得到404答案

【问题标题】：Vue router on page refresh gets 404页面刷新时的Vue路由器得到404
【发布时间】：2019-01-08 20:22:59
【问题描述】：

我正在使用带有历史模式的 Vue 路由器。在按钮上单击当前页面，我将其路由到下一页。在我重新加载的第二页上，我得到一个 404。有没有办法在 Vue 中处理这个并将其重定向到主页。

export default new Router({
  mode: "history",
  routes: [
    {
      path: "/",
      name: "first",
      component: First
    },
    {
      path: "/abc",
      name: "abc",
      component: Second,
      props: true
    },

【问题讨论】：

Deploying vue js app and getting 404 error in routes的可能重复
我以前也遇到过这个问题，但是有很多可能导致它。您是否能够设置 jsFiddle 或 stackblitz 来复制您所面临的实际场景？
我在后端使用 Spring Boot 嵌入式码头容器。有没有办法我可以在去服务器之前拦截请求并向它传递一个额外的请求参数，然后在我的服务器端处理
@stwilz：不，它只是页面刷新。我观察到的唯一一件事是在按钮单击时我使用不同的路径进行 ajax 调用，但在页面重新加载时路径是路由器中定义的路径。
嗯，这可能是一些事情。将其作为网站运行，如果该路线不存在，该路线将通过 404。您需要更新您的托管配置以始终指向应用程序的index.html，以便您的服务器知道从所有路由为您的应用程序提供服务。如果您从所有路由为应用程序提供服务并且 Vue 没有呈现您希望的组件，那么您的 vue-router 配置需要更新。

标签： javascript vue.js vue-router

【解决方案1】：

我们已经在后端解决了这个问题，我们有过滤器拦截请求并将其重定向到主页。我们已使其可配置。

【讨论】：

您能分享您的过滤器解决方案并将其添加到问题中吗？会很有帮助，因为我在使用 Jetty 时遇到了类似的问题。谢谢！ :)

【解决方案2】：

这与 Vue Router 中的历史模式如何工作有关。我已经创建了一个关于它的文章，以及一个解决方案。

取决于您的服务器实现，您需要在那里启用 URL 重写。下面是如何使用 Express/Node.js 实现的：

const express = require('express');
const app = express();
const port = 80;
const buildLocation = 'dist';
app.use(express.static(`${buildLocation}`));
app.use((req, res, next) => {
  if (!req.originalUrl.includes(buildLocation)) {
    res.sendFile(`${__dirname}/${buildLocation}/index.html`);
  } else {
    next();
  }
});
app.listen(port, () => console.info(`Server running on port ${port}`));

欲了解更多信息，请查看https://blog.fullstacktraining.com/404-after-refreshing-the-browser-for-angular-vue-js-app/。高温

【讨论】：

【解决方案3】：

您可以使用不包含历史模式的哈希模式来解决路由器上的问题

let router = new Router({
    mode: "hash",
  routes: [
    {
    //and the urls with path on here ...

【讨论】：

【解决方案4】：

如果在尝试上述解决方案后仍有任何人遇到问题，请查找以下方法。如果你有vue.config.js 有

module.exports = {
  publicPath: process.env.PUBLIC_URL || "", // <-- this is wrong
  ...
};

要么删除 vue.config.js，要么尝试从导出对象中删除 publicPath。

如果您不想删除 publicPath，也可以尝试以下方法

module.exports = {
  publicPath: process.env.PUBLIC_URL || "/", // <-- this is correct now (and default)
  transpileDependencies: ["vuetify"],
};

【讨论】：