Nuxt动态路由 return 页面重新加载后404
Nuxt dynamic route return 404 after page is reloaded
大家好我正在做一个使用 nuxt js 的项目，我只是这个框架的新手。我已经将它配置为使用 spa 模式，仅供参考，我没有在我的 nuxt 配置中更改或添加任何默认设置。下面是我设置页面的方式。
pages/users/index.vue - 显示列表或用户
pages/users/_id.vue - 显示特定用户
我已经使用 npm 运行 build 和 npm 运行 start 命令部署了我的项目。然后将 dist 目录托管在 nginx 服务器中。
问题是，当我使用 nuxt link 导航到 /user/id 时，页面呈现正确，但是当我访问页面时 url直接或刷新页面我得到nginx 404页面未找到。
我读过有关 nuxt generate 生成预呈现页面的信息，但是在处理数百条记录时使用它是否好用？
非常感谢任何帮助和建议。
谢谢
你们完全是混血儿。首先，默认模式是 universal aka ssr，而不是 spa。 Docs
其次，运行ning npm 运行 通用模式需要启动，而在 spa 模式下，您只需放置单个 html 文件并将所有请求从 nginx 路由到此文件。
但是如果你正在使用 npm 运行 启动它的通用应用程序，并且你不通过你的 nginx 托管简单 html，你应该为 nginx 设置下游源并将所有请求路由到节点服务器例如默认为 localhost:3000
一开始你应该明白什么问题可以帮助你解决nuxt
您可以创建三种类型的应用程序：
- 静态页面
在路由的基础上，nuxt生成html个文件，这些文件是SEO友好的。例如，这适用于名片页面（主页 + 几个子页面）。你得到现成的 html 文件，例如index.html、contact.html等
- SPA
不需要搜索引擎优化但具有动态路径和界面的应用程序。不使用服务器端渲染。有些方法无法使用，但还是利用了nuxt的一些好处。比如动态路由或者nuxt中配置中可用的很多选项。
- 通用
让您享受nuxt.js的所有好处。借助专用网站方法（fetch、asyncData、nuxtServerInit 等），它允许您在服务器端准备数据以在浏览器端生成它们，以便它们对 SEO 友好。
因此，如果您需要使用动态路由，则必须在SPA和Universal模式之间进行选择。检查你应该使用什么命令 USE
具有静态站点生成和动态路由的 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（默认）文件夹。
In 2.13.0, Nuxt introduced a target: static feature, make sure to
check it.
如果你设置fallback: true，Nuxt会使用404.html作为默认回退页面，除非你配置nginx忽略它自己的默认404页面，nginx还是会显示给你默认的nginx 404页面.如 nuxt 文档中所述，Netlify 等某些服务将利用此行为来简化 SPA 集成。尽管对于 nginx，我认为自定义回退页面是进行静态站点和 SPA 混合的最简单方法。
在这种方法中，静态页面将被预渲染，动态路由被视为 nginx 的未知路由，使用后备 SPA 页面进行渲染。
并确保您正确处理真正的未知路线。
对于一组固定的动态路由
您可以使用函数 generate the static site
只想要一个 SPA 网站
可以使用spa模式，参考nginx设置here
大家好我正在做一个使用 nuxt js 的项目，我只是这个框架的新手。我已经将它配置为使用 spa 模式，仅供参考，我没有在我的 nuxt 配置中更改或添加任何默认设置。下面是我设置页面的方式。
pages/users/index.vue - 显示列表或用户
pages/users/_id.vue - 显示特定用户
我已经使用 npm 运行 build 和 npm 运行 start 命令部署了我的项目。然后将 dist 目录托管在 nginx 服务器中。
问题是，当我使用 nuxt link 导航到 /user/id 时，页面呈现正确，但是当我访问页面时 url直接或刷新页面我得到nginx 404页面未找到。
我读过有关 nuxt generate 生成预呈现页面的信息，但是在处理数百条记录时使用它是否好用？
非常感谢任何帮助和建议。
谢谢
你们完全是混血儿。首先，默认模式是 universal aka ssr，而不是 spa。 Docs
其次，运行ning npm 运行 通用模式需要启动，而在 spa 模式下，您只需放置单个 html 文件并将所有请求从 nginx 路由到此文件。
但是如果你正在使用 npm 运行 启动它的通用应用程序，并且你不通过你的 nginx 托管简单 html，你应该为 nginx 设置下游源并将所有请求路由到节点服务器例如默认为 localhost:3000
一开始你应该明白什么问题可以帮助你解决nuxt
您可以创建三种类型的应用程序：
- 静态页面
在路由的基础上，nuxt生成html个文件，这些文件是SEO友好的。例如，这适用于名片页面（主页 + 几个子页面）。你得到现成的 html 文件，例如index.html、contact.html等
- SPA
不需要搜索引擎优化但具有动态路径和界面的应用程序。不使用服务器端渲染。有些方法无法使用，但还是利用了nuxt的一些好处。比如动态路由或者nuxt中配置中可用的很多选项。
- 通用
让您享受nuxt.js的所有好处。借助专用网站方法（fetch、asyncData、nuxtServerInit 等），它允许您在服务器端准备数据以在浏览器端生成它们，以便它们对 SEO 友好。
因此，如果您需要使用动态路由，则必须在SPA和Universal模式之间进行选择。检查你应该使用什么命令 USE
具有静态站点生成和动态路由的 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（默认）文件夹。
In 2.13.0,
Nuxtintroduced atarget: staticfeature, make sure to check it.
如果你设置fallback: true，Nuxt会使用404.html作为默认回退页面，除非你配置nginx忽略它自己的默认404页面，nginx还是会显示给你默认的nginx 404页面.如 nuxt 文档中所述，Netlify 等某些服务将利用此行为来简化 SPA 集成。尽管对于 nginx，我认为自定义回退页面是进行静态站点和 SPA 混合的最简单方法。
在这种方法中，静态页面将被预渲染，动态路由被视为 nginx 的未知路由，使用后备 SPA 页面进行渲染。
并确保您正确处理真正的未知路线。
对于一组固定的动态路由
您可以使用函数 generate the static site
只想要一个 SPA 网站
可以使用spa模式，参考nginx设置here