Question

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

/shop/:product

等

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

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

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

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

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

我认为我对Nuxt解决方案有误解-我真的应该为每个现有的产品生成所有条可能的路线吗？

Answer 1

我不确定您对production的含义。您在使用nuxt generate吗？如果是这样，是的，您需要这样做（am I really supposed to generate all possible routes for every existing product slug??）。

您只需要向下滚动一点。有Function which returns a Promise部分。

您只需要将axios呼叫放在generate内的nuxt.config.js部分中即可。

Answer 2

当您生成静态页面时，它会分别生成目录和index.html。如果您提供静态HTML，您如何期望它具有动态性？

您有2种解决方案：

请勿使用npm run generate。在服务器上运行nuxt。使用此解决方案，可以避免在浏览器中使用ajax。而是由nuxt执行它，并将HTML发送到浏览器。对SEO很好。
让您的Web服务器（nginx）将所有请求都指向/index.html-那时，javascript接管了它，它可以正确找到该子弹并通过ajax查询产品。对SEO不利，因为您需要在页面加载完成后使用ajax来获取内容。

有关此问题的文档和配置，可以在nuxt的网站上找到。

Answer 3

对我来说，解决方案是使用：

// nuxt.config.js

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

我通过内置的dist/文件夹提供该应用程序。我在Netlify部署文档中遇到了这个问题：

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

解决此问题的最简单方法是在您的计算机中添加generate属性   nuxt.config并设置回退：true。然后它将回退到   处于SPA模式而不是Netlify的404页面时生成404.html。

参考文献：

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

3 个答案: