如何在 Nuxt 路由器中手动生成带有 .htaccess 的 404 页面回退的页面

Question

我正在尝试使用 Nuxt.js 创建一个 SSG 站点。 当我访问未在 nuxt.config.js 的 generate 属性中设置的路由时， 我想在不更改 URL 的情况下显示 404 页面的内容。（使用 htaccess）

以下是正在建设中的网站

http://we-are-sober.d3v-svr.com/xxxx

这是按预期工作的。

http://we-are-sober.d3v-svr.com/user/xxxx

这没有按预期工作。

页面404的内容显示片刻，但很快就执行了基于“user/_id.vue”动态路由的流程。

问题的关键在于，不存在的路由表现得好像它存在一样。 有谁知道如何解决这个问题？

这里是源代码。 https://github.com/yhirochick/rewrite_test

404.vue

https://github.com/yhirochick/rewrite_test/blob/master/pages/404.vue

user/_id.vue

https://github.com/yhirochick/rewrite_test/blob/master/pages/user/_id.vue

nuxt.config.js

https://github.com/yhirochick/rewrite_test/blob/master/nuxt.config.js#L43-L45

.htaccess

https://github.com/yhirochick/rewrite_test/blob/master/static/.htaccess

我是日本人。以上文字基于谷歌翻译。 可能很难理解，但谢谢。

Answer 1

我在处理此类问题的同时尽量减少所需的 API 调用的方法如下：

• 生成一个全新的 Nuxt 项目
• 安装axios：yarn add -D axios
• 将此添加到nuxt.config.js 文件中

import axios from 'axios'

export default {
  ...
  generate: {
    routes: async () => {
      const users = await axios.get('https://jsonplaceholder.typicode.com/users')
      return users.data.map((user) => ({
        route: `/users/${user.id}`,
        payload: user,
      }))
    },
    fallback: 'no-user.html', // this one is not needed anymore if you ditch the redirect!
  },
}

这将生成所有需要的路由，同时通过payload 将调用保持在最低限度，稍后将传递到页面。更多信息可以在the docs找到。

• 那么，创建/pages/users/_id.vue 页面就可以了

<template>
  <div>
    <div v-if="user">User name: {{ user.name }}</div>
    <div v-else-if="error">{{ error }}</div>
  </div>
</template>

<script>
export default {
  asyncData({ payload }) {
    if (payload && Object.entries(payload).length) return { user: payload }
    else return { error: 'This user does not exist' } // this will also catch users going to `/users/`
  },
}
</script>

• 创建一些no-user.vue页面，error.vue布局，你应该是gucci

---

最后，我们有 10 个来自模拟 API 的用户。所以有以下几种情况：

• 如果我们转到 /users/5，用户已经是静态的，所以我们确实拥有它的信息，而无需任何额外的 API 调用
• 如果我们转到/users/11，则用户在构建时不存在，因此他不在这里，我们正在显示错误
• 如果我们去/users，我们仍然会被发送到/pages/users/_id页面，但是由于:id在那里是可选的，它会出错并且仍然显示错误，index.vue当然可以处理这个案子

我的 github 仓库可以在这里找到：https://github.com/kissu/so-nuxt-generate-placeholder-users

Answer 2

这是一个棘手的方法，但我已经找到了我想要的代码。

https://fes.d3v-svr.com/users/xxxxxx 这是我所期望的作品。

• 用户 xxxxxx 不存在
• 显示 404 页面
• URL /users/xxxxxx 原样

首先，只需设置 .htaccess 将不存在的页面重写为 404 页面

ErrorDocument 404 /no-user/index.html

仅在上面，Nuxt 基于 URL /users/xxxxxx/ 执行并将页面重新渲染为“UserXXXXXX”，即使他不存在。

为避免这种情况，users/_id.vue 如下所示。

模板

<template>
  <div v-if="ssr">User name: {{ user.name }}</div>
</template>

脚本

<script>
export default {
  asyncData({ payload }) {
    return { user: payload, ssr:true }
  },
}
</script>

好像一个模板是空的，nuxt就不会执行依赖于URL的脚本了。

这很棘手，所以我将继续介绍它的工作原理。