Nuxt.js 刷新 url 找不到 404

Question

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

我创建动态页面，如https://samplesite.com/place/{place_id}place_id 动态值。（我的数据库中有大约 4,000 多个位置）

在我运行npm run generate并获取 /dist 文件夹后，我将此文件夹推送到亚马逊 EC2。

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

但是当我在网络浏览器上按下刷新按钮时，页面 /place/{place_id} 显示 404 not found。

你有解决这个问题的方法吗？

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

请告诉我该怎么办。

Answer 1

创建一个 .htaccess 文件并将以下代码放入其中。

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

Answer 2

你有一组固定的动态路由吗？

如果这样做，您可以使用函数生成静态站点

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中使用SSR，这就是模式universal。另一种选择就是上面的静态站点生成

你们有 SPA 网站吗？

如果这样做，您可以使用spa模式并参考此处显示的 nginx 设置

如果您不知道确切的动态路由，也不关心动态路由的SEO，您可以将静态站点生成与动态路由结合起来。

在universal模式下，用于nuxt generate生成静态站点。

在生成配置中，为 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 视为未知路由，使用后备 SPA 页面进行渲染。

Answer 3

npm run generate不支持动态路由。因为它不知道如何构建{{pageid}}.html.

来自 nuxt 文档：

动态路由将被生成命令忽略。

请参阅： https: //nuxtjs.org/api/configuration-generate#routes