我的nuxt.js项目有一个问题。

我创建了像https://samplesite.com/place/{place_id}这样的动态页面,其中place_id是动态值。 (我的数据库中有大约4,000多个位置)

在我运行npm run generate并获取/dist文件夹后,然后将该文件夹推送到Amazon EC2。

一切正常,当我在/place/{place_id}页面的索引页面上单击一个赞时,网站将显示地点信息。

但是,当我在Web浏览器上按“刷新”按钮时,页面/place/{place_id}显示404找不到。

您有解决此问题的解决方案吗?

我在nuxt.js网站上阅读,他们说我需要生成动态页面,但是我的位置大约是4,000个位置,我认为不可能生成所有位置页面。

请告诉我该怎么办。

最佳答案

您是否有一套动态路线?
如果这样做,则可以使用函数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吗?
如果您确实关心SEO,则可以在Nuxt(即universal模式)中使用SSR。另一个选择是上面的静态网站生成
您有SPA网站吗?
如果这样做,则可以使用spa模式并引用ngt_a中显示的nginx设置
如果您不知道确切的动态路由,也不在乎动态路由的SEO,则可以将静态网站生成与动态路由结合起来。
universal模式下,使用nuxt generate生成一个静态站点。
here中,定义SPA后备的自定义页面:
export default {
  generate: {
    fallback: "custom_sap_fallbackpage.html"
  }
}
然后在Nginx中,为未知路由定义相同的后备页面,例如:
location / {
    try_files $uri /custom_sap_fallbackpage.html;
}
如果您设置fallback: true,则Nuxt将使用404.html作为默认的后备页面,除非您将nginx配置为忽略其自己的默认404页面,否则nginx仍将向您显示默认的nginx 404页面。我认为自定义后备页面是进行静态网站生成和SPA混合的最简单方法。
在这种方法中,静态页面将被预渲染,动态路由被视为nginx的未知路由,nginx使用后备SPA页面进行渲染。

10-07 19:38
查看更多