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

Posted 2023-03-25

【中文标题】页面重新加载后 Nuxt 动态路由返回 404

【英文标题】：Nuxt dynamic route return 404 after page is reloaded

【发布时间】：2019-07-20 02:48:58

【问题描述】：

大家好，我正在开发一个使用 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 page not found .

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

任何帮助、建议，将不胜感激。

谢谢

【参考方案1】：

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

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

静态页面

nuxt 在路由的基础上生成 html 文件，是 SEO 友好的。例如，这适用于名片页面（主页 + 几个子页面）。你会得到现成的 html 文件，例如index.html、contact.html 等

SPA

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

通用

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

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

【参考方案2】：

你完全是混杂的东西。首先，默认模式是universal aka s-s-r，而不是spa。 Docs

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

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

【参考方案3】：

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

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

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

export default 
  generate: 
    fallback: "custom_sap_fallbackpage.html"
  

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

location / 
    try_files $uri /custom_sap_fallbackpage.html;

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

在 2.13.0 中，Nuxt 引入了 target: static 功能，请确保 检查it。

如果你设置了fallback: true，Nuxt 会使用 404.html 作为默认的 fallback 页面，除非你配置 nginx 忽略它自己的默认 404 页面，否则 nginx 仍然会显示默认的 nginx 404 页面。如 nuxt 文档中所述，Netlify 等一些服务将利用此行为来简化 SPA 集成。虽然对于 nginx，我认为自定义后备页面是进行静态站点和 SPA 混合的最简单方法。

在这种方法中，静态页面会被预渲染，动态路由被nginx视为未知路由，使用fallback SPA页面来渲染。

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

对于一组固定的动态路由

您可以使用函数generate the static site

只想要一个 SPA 网站

你可以使用spa模式，参考nginx设置显示here

【讨论】：

这个答案在一些地方是不正确的。首先，您的整个第一点都是错误的。 generate 属性中有一个 routes 函数，用于动态确定路由。它是target: static 功能的前身并且做同样的事情。那就是我们下一个问题，s-s-r是注意实现SEO的唯一途径。您可以使用我刚刚为静态应用程序描述的两种方法中的任何一种。有关 Nuxt 中 SEO 的更多信息，请参阅 ***.com/questions/63061720/…