使用 Vue 在站点上共享链接时出现加载问题

Question

我创建了一个使用 Vue 作为前端框架并使用 CMS CosmisJS 来管理内容的网站。我的网站使用 Vue Router、Vuex 和 Vue Meta 等，并托管在 Netlify 上。

我的网站运行良好，您可以在不同的路线之间导航并且信息加载没有问题，但是，当我与路线共享链接时，例如 http://example.com/route，页面根本无法加载并显示给我一个 Netlify 错误，显示“未找到页面”，即使该路由存在并且如果您从根路由导航可以访问。

我不知道问题出在哪里。我认为这可能是与 API 调用的加载时间相关的错误，或者是我的 Vue 路由器配置中的一些错误，但我进行了更改，问题仍然存在。

知道它可能是什么吗？

这是我的 Vue Router 的简化版本。

import Vue from "vue";
import VueRouter from "vue-router";
import CentroEstudios from "../views/CentroEstudios.vue";
import Nosotras from "../views/Nosotras.vue";
import Index from "../views/Index.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Index",
    component: Index,
  },
  {
    path: "*",
    name: "NotFound",
    component: NotFound,
  },
  {
    path: "/centro-de-estudios",
    name: "Centro de Estudios",
    component: CentroEstudios,
  },
  {
    path: "/nosotras",
    name: "Nosotras",
    component: Nosotras,
  },
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

Answer 1

这是在路由器上使用 history 模式的结果。 https://router.vuejs.org/guide/essentials/history-mode.html

但问题来了：由于我们的应用是单页客户端应用，没有适当的服务器配置，如果用户直接在浏览器中访问http://oursite.com/user/id，将会收到 404 错误。现在这很难看。

您需要配置 Netlify 以兼容历史模式： https://docs.netlify.com/routing/redirects/rewrites-proxies/#history-pushstate-and-single-page-apps

这是 netlify 支持论坛上的另一个相关帖子： https://answers.netlify.com/t/vue-app-not-routing-correctly-when-deployed/6363

或者，如果对于您正在制作的网站来说没问题，您也可以只使用默认哈希模式，然后您就不会遇到此问题，但您将在所有 URL 路径之前都有一个哈希。