Nuxt.js刷新url得不到404

Question

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

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

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

一切顺利，当我点击索引页面上的/ to / place / {place_id}页面，网站显示地点信息时。

但是当我在网络浏览器上按下刷新按钮时，页面/地点/ {place_id}显示404未找到。

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

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

请告诉我该怎么办。

Answer 1

您是否有一套动态路由？

如果这样做，则可以使用函数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模式并参考显示在here上的nginx设置

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

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

在generate config中，定义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 2

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

来自nuxt docs：

  

generate命令会忽略动态路由。

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

Answer 3

创建一个 .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>