在 vuepress 中更改 404 页面

Posted 2023-02-22

【中文标题】在 vuepress 中更改 404 页面

【英文标题】：Change 404 page in vuepress

【发布时间】：2019-01-13 02:43:28

【问题描述】：

是否可以更改/自定义 Vuepress 的 404 页面而无需弹出并且必须更改整个主题？

我目前正在使用enhanceApp.js，但由于路由器已经创建，我不确定如何更改路由器选项（包罗万象的路由）。我现在的工作方式是这样的：

router.beforeEach((to, from, next) => 
  if (to.matched.length > 0 && to.matched[0].path === "*") 
    next("/404.html");
   else 
    next();
  
);

但是，这感觉像是一种 hack，因为我总是重定向到包含我的 404 的自定义和现有页面。有没有更官方的方法来做到这一点？

【参考方案1】：

我有一个基于 Vuepress 1.5.x 的站点，我能够在主题/布局下简单地创建一个名为 NotFound.vue 的页面。无需更改 enhanceApp.js。

Vuepress 本身似乎已经知道这个保留的布局名称，基于 code here。

我之前将该页面命名为 404.vue，但我收到一条警告说页面应遵循正确的 HTML 5 组件命名标准。只需将其重命名为 NotFound.vue 即可。

我的 NotFound.vue 文件的内容：

<template>
  <BaseLayout>
    <template #content>
      <v-container class="text-center">
        <div class="py-6" />
        <h1>Oops!</h1>
        <p>Nothing to see here.</p>
        <v-btn class="cyan--text text--darken-3"
          exact :to="'/'" text>Go home</v-btn>
      </v-container>
    </template>
  </BaseLayout>
</template>

<script>
export default 
  name: "NotFound"
;
</script>

【讨论】：

看起来您现在可以拥有一个 404.md 文件，而无需 enhanceApp.js 部分。还是0.x的时候问的问题

我在命令行上收到关于名称“404”不符合 HTML5 组件名称标准的警告。所以我认为这也是支持“NotFound”的原因。