页面重新加载后Nuxt动态路由返回404

Question

大家好，我正在开发一个使用 nuxt js 的项目，我只是这个框架的新手。 我已经将它配置为使用spa模式，仅供参考，我没有在我的 nuxt 配置中更改或添加任何内容，只是默认设置。 下面是我如何设置我的页面。

pages/users/index.vue - 显示列表或用户

pages/users/_id.vue - 显示特定用户

我已经使用npm run build和npm run start命令部署了我的项目。 然后将 dist 目录托管在 nginx 服务器中。

问题是，当我使用 nuxt 链接导航到/user/id 时，页面会正确呈现，但是当我直接访问页面 url 或刷新页面时，我找不到 nginx 404 页面。

我已经阅读了有关 nuxt generate 来生成预渲染页面的信息，但是在处理数百条记录时使用它有好处吗？

任何帮助，建议，都会非常有用。

谢谢

Answer 1

一开始你应该了解哪些问题可以帮助你解决nuxt。

您可以创建三种类型的应用程序：

1. 静态页面

在路由的基础上，nuxt 生成 html 文件，这些文件对 SEO 友好。 例如，这适用于名片页面（主页 + 多个子页面）。 您可以获得现成的 html 文件，例如 index.html、contact.html 等。

2. 温泉

不需要 SEO，但具有动态路径和界面的应用程序。 不使用服务器端渲染。 有些方法不可用，但仍然使用了 nuxt 的一些好处。 例如，动态路由或nuxt中配置中可用的许多选项。

3. 普遍的

让你享受 nuxt.js 的所有好处。 借助专用的网站方法（fetch、asyncData、nuxtServerInit 等），它允许您在服务器端准备数据以在浏览器端生成它们，以便它们对 SEO 友好。

因此，如果您需要使用动态路由，则必须在 SPA 和通用模式之间进行选择。 检查您应该使用哪些命令

Answer 2

你是完全混合的东西。 首先，默认模式是universal aka ssr，而不是spa。 文档

其次，运行 npm run start 需要通用模式，而在 spa 模式下，您只需放置单个 html 文件并将所有请求从 nginx 路由到此文件。

但是，如果您使用 npm run start 启动它的通用应用程序，并且您不通过 nginx 托管简单的 html，您应该为 nginx 设置下游源并将所有请求路由到节点服务器，例如默认为 localhost:3000

Answer 3

Nuxt 带有静态站点生成和动态路由

使用这种方法 如果您不知道确切的动态路由，请不要关心动态路由的 SEO。

在generate config 中，为 SPA 回退定义一个自定义页面：

export default {
  generate: {
    fallback: "custom_sap_fallbackpage.html"
  }
}

然后在 Nginx 中，为未知路由定义相同的回退页面，例如：

location / {
    try_files $uri /custom_sap_fallbackpage.html;
}

universal模式下，使用nuxt generate生成静态站点，部署dist （默认）文件夹。

在 2.13.0 中， Nuxt引入了一个target: static特性，请务必检查它。

如果你设置fallback: true ，Nuxt 会使用 404.html 作为默认的 fallback 页面，除非你配置 nginx 忽略它自己的默认 404 页面，nginx 仍然会显示默认的 nginx 404 页面。 正如nuxt DOC文件，像一些服务Netlify将利用这种行为更容易SPA一体化。 虽然对于 nginx，我认为自定义回退页面是进行静态站点和 SPA 混合的最简单方法。

在这种方法中，静态页面将被预渲染，动态路由被视为 nginx 的未知路由，使用回退 SPA 页面进行渲染。

并确保您正确处理真正的未知路线。

对于一组固定的动态路由

您可以使用函数来生成静态站点

只想要一个SPA网站

您可以使用spa模式并参考此处显示的 nginx 设置