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

Question

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

页面/用户/index.vue -显示列表或用户

页面/用户/_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等。

1. SPA

不需要SEO但具有动态路径和接口的应用程序。不使用服务器端渲染。某些方法不可用，但仍使用nuxt的某些优点。例如，动态路由或nuxt的配置中提供了许多选项。

1. 通用

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

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

使用的命令

Answer 2

你完全是混血儿。首先，默认模式是通用aka ssr，而不是spa。 Docs

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

但是如果您使用npm run启动其通用应用程序，并且您没有通过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功能，请确保 检查it。

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

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

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

对于一组固定的动态路由

您可以使用函数generate the static site

In 2.13.0, `nust` introduced a `target: static` feature, make sure to 
check [it](https://nuxtjs.org/blog/going-full-static) out.

SEO是该项目的优先重点

您必须在universal模式的Nuxt中使用SSR。

仅SPA网站

您可以使用spa模式并参考显示在here上的nginx设置