存在且通过内部正常工作的页面上的错误 404 link

Question

我在 Vue.js 上创建了一个包含多个页面的网站。

在本地一切正常，但是当我部署到 Heroku 时，所有页面 仅当我在我的菜单中单击重定向到的内部 link 时才有效相应的页面（使用路由器推送）。

当我尝试从浏览器直接访问/任何页面时，我收到 404 并显示一条消息 "Cannot GET /any-page" 而通过单击 link.

可以正确显示同一页面

正如我在本地提供我的应用程序时提到的那样，我没有遇到这个问题。

我真的看不出这是从哪里来的，在此先感谢您的帮助。

Answer 1

Heroku 正在提供您的 Vue 构建文件夹的内容。由于 Vue 将应用程序构建为单个 index.html 文件，因此只有主路径有效。

Vue 实际上并不导航到路由，而是使用历史 API 重写浏览器 url 并处理新路由的加载。

您可以使用以下选项之一：

选项 1

您可以在重新加载页面时使用 mode: "hash" 来修复路由。但是，这将在每条路线之前添加一个 #。

const router = new VueRouter({
  mode: "hash",
  routes: [...]
})

选项 2

编写一个 Node.JS（例如 Express）应用程序，将每个请求路由到您的 index.html 文件。这称为 中间件

Answer 2

官方 Vue CLI 文档中有专门针对 Heroku 的部署指南。

您会很快注意到相关信息：

static.json

{
  "root": "dist",
  "clean_urls": true,
  "routes": {
    "/**": "index.html"
  }
}

对于 SPA（单页应用程序），您需要将每个路由指向索引。 Vue 路由器将负责导航到正确的页面。

Error 404 on a page that exists and that works fine through internal link