Vue 3 简单的包罗万象的后备路由在服务器上不起作用

Question

我使用 Vue router 4 创建了一个新的 Vue 3 应用程序。

当我通过 访问链接时，它会打开页面，但是当我直接打开链接时，它会显示未找到错误。

{ 未找到 在此服务器上找不到所请求的 URL。 Apache/2.4.52 (Ubuntu) 服务器位于classifieds.netnoor.com 端口 443 }

当我在本地环境使用vite测试时。它在本地工作正常，但是当我使用 npm vite build 部署它并在 Appache 服务器上上传 dist 文件夹时，它不起作用，并且总是显示未找到错误。

const router = createRouter({
  history: createWebHistory('/'),
  routes: [
    {
      path: "/:pathName(.*)*",
      name: "NotFound",
      component: HomeView
    },
    {
      path: "/:catchAll(.*)",
      name: "NotFound",
      component: HomeView
    },
      other routes below

  ]
})

我还没有设置任何.htaccess 文件。请让我知道如何处理这个问题，我已经设置了简单的万能回退，但它不起作用。

Answer 1

使用应在远程 Apache 上使用

mod_rewrite

将所有 URL 链接到

index.html

。

如果您将

createWebHistory

更改为

createWebHashHistory

它也可以工作，但您将拥有哈希 URL。