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

最新推荐文章于 2024-08-05 09:59:45 发布

weixin_39795268

最新推荐文章于 2024-08-05 09:59:45 发布

阅读量1k

点赞数

文章标签：动态生成html后重新加载页面

本文介绍了如何在Nuxt.js中处理动态路由以优化SEO。通过设置`generate.fallback`为自定义页面，可以确保未知路由被适当地处理。在Nginx配置中，为未知路由指定相同的后备页面，以实现静态站点和SPA混合。在 universal 模式下，对于固定动态路由，优先考虑SEO，应使用SSR。同时，要正确处理真实未知路由，以确保良好的用户体验。

摘要由CSDN通过智能技术生成

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(默认)文件夹。

If you set fallback: true, Nuxt will use 404.html as the default fallback page, unless you configure nginx to ignore its own default 404 page, nginx will still show you the default nginx 404 page. As documented in the nuxt doc, some services like Netlify will utilize this behavior for easier SPA integration. Though for nginx, I think a custom fallback page is the easiest way to do the static site and SPA mixing.

In this approach, static page will be pre-rendered, dynamic routes is treated as unknown route for nginx, which use the fallback SPA page to render.

And make sure you properly handle the real unknown route.

For a fixed set of dynamic routes

SEO is a priority for the project

You must use SSR in Nuxt, which is the universal mode.

Only a SPA site

You can use spa mode and refer to the nginx setting showed here