Nuxt - 构建后的动态参数不起作用答案

【问题标题】：Nuxt - dynamic params after building does not workNuxt - 构建后的动态参数不起作用
【发布时间】：2020-02-22 04:41:34
【问题描述】：

在 Nuxt（“spa”模式）项目中，我有一个带有动态参数 /shop/:product 的 url，可以是这样的：

    /shop/ipad-128gb-rose-gold
    /shop/subway-gift-card
    /shop/any-string

等等

在开发环境中使用这个目录结构可以正常工作：

pages/
  shop/
    _product.vue

但是它在生产中不起作用。查看生成的bin/ 文件夹，我发现shop/ 目录中没有任何内容。我看到 Nuxt 在这里提到了一个解决方案：https://nuxtjs.org/api/configuration-generate/#routes

但在我的情况下，我不知道 :product 参数是什么（可以是任何字符串）。

我正在从服务器获取pages/shop/_product.vue 中的product 详细信息（如果存在），否则将处理错误。那么现在我该如何在生产版本中做到这一点呢？

我想我误解了 Nuxt 解决方案——我真的应该为每个现有产品 slug 生成所有可能的路线吗？？

【问题讨论】：

标签： javascript vue.js nuxt.js

【解决方案1】：

我的解决方案是使用：

// nuxt.config.js

export default {
  ...
  generate: {
    fallback: true
  }
}

我正在从构建的 dist/ 文件夹中提供应用程序。我在 Netlify 部署文档中发现了这一点：

对于单页应用，默认情况下会出现刷新问题 netlify 网站重定向到“404 未找到”。对于任何页面没有生成它们将回退到 SPA 模式，然后如果你刷新或分享该链接，您将获得 Netlify 的 404 页面。这是因为未生成的页面实际上并不存在实际上是一个单页应用程序，所以如果你刷新这个页面，你将得到 404，因为该页面的 url 实际上并不存在。通过重定向到 404.html Nuxt 将正确地重新加载您的页面 SPA 后备。

解决此问题的最简单方法是在您的 nuxt.config 并设置回退：true。然后它会回退到在 SPA 模式下生成 404.html 而不是 Netlify 的 404 页面。

参考资料：

【讨论】：

对我没有任何作用。仍然会得到 404 刷新任何 slug 页面。

【解决方案2】：

当您生成静态页面时，它会在每个页面中生成目录和 index.html。如果您提供静态 HTML，您如何期望它是动态的？

您有 2 个解决方案：

不要使用npm run generate。在服务器上运行 nuxt。使用此解决方案，您可以避免在浏览器中使用 ajax。相反，nuxt 会执行它并将 HTML 发送到浏览器。适合 SEO。
让您的 Web 服务器 (nginx) 将所有请求指向 /index.html - 此时，javascript 接管，它可以正确找到 slug 并通过 ajax 查询产品。对 SEO 不利，因为您需要在页面加载完成后使用 ajax 来获取内容。

有关这方面的文档和配置可以在 nuxt 的网站上找到。

【讨论】：

RE：当您生成静态页面时，它会在每个页面中生成目录和 index.html。如果您提供静态 HTML，您如何期望它是动态的？在开发过程中，它按预期工作，这就是为什么——直到现在，我才意识到构建/生成的产品最终会是什么样子。回复：不要使用 npm run generate。在服务器上运行 nuxt。使用此解决方案，您可以避免在浏览器中使用 ajax。相反，nuxt 会执行它并将 HTML 发送到浏览器。对 SEO 有好处。这是否意味着我应该编写一个 server.js，并在其中让 Nuxt 处理请求？
抱歉回复晚了，StackOverflow 审核团队阻止我回复。你应该做的是在 SSR 模式下运行 Nuxt。您像往常一样编写代码，部署时在服务器上运行npm run production。您使用 nginx 将请求路由到 nuxt 并终止 SSL。