Nuxt.js 刷新 url 得到 404 未找到

Posted 2023-02-22

【中文标题】Nuxt.js 刷新 url 得到 404 未找到

【英文标题】：Nuxt.js refresh url get 404 not found

【发布时间】：2018-05-03 11:18:03

【问题描述】：

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

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

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

一切正常，当我点击索引页面上的点赞到 /place/place_id 页面时，网站会显示地点信息。

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

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

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

请告诉我该怎么做。

【问题讨论】：

您需要从服务器端提供该数据

重载404时能不能截图错误

抱歉重新打开它，我只是遇到了同样的问题，但我正在使用 Vue CLI 的命令 npm run build 进行编译。此外，它发生在 dinamyc 和静态路由上，我可以重新加载的唯一一条路由是索引。我将它上传到 Azure 中的 Apache 服务器上。希望你能帮助我。

【参考方案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 中使用 s-s-r，即universal 模式。另一种选择是上面的静态站点生成

您有 SPA 网站吗？

如果你这样做，你可以使用spa模式并参考nginx设置显示here

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

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

在generate config 中，为 SPA 回退定义一个自定义页面：

export default 
  generate: 
    fallback: "custom_sap_fallbackpage.html"
  

然后在 Nginx 中，为未知路由定义相同的 fallback 页面，如：

location / 
    try_files $uri /custom_sap_fallbackpage.html;

如果你设置了fallback: true，Nuxt 会使用 404.html 作为默认的 fallback 页面，除非你配置 nginx 忽略它自己的默认 404 页面，否则 nginx 仍然会显示默认的 nginx 404 页面。我认为自定义后备页面是进行静态站点生成和 SPA 混合的最简单方法。

在这种方式下，静态页面会被预渲染，动态路由被nginx视为未知路由，使用fallback SPA页面进行渲染。

【参考方案2】：

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

【讨论】：

这对我有用，谢谢分享。

【参考方案3】：

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

来自 nuxt 文档：

generate 命令忽略动态路由。

见：https://nuxtjs.org/api/configuration-generate#routes