Nuxt 为所有动态路由生成带有后备文件的静态站点

Question

我已经在整个互联网上搜索了我的问题的答案。到目前为止没有运气。

我想要实现的目标： 我有一个在通用模式下运行的 Nuxt 应用程序。它类似于一个小型社交网络，用户可以在其中创建自己的个人资料并分享他们的工作。

所以我正在使用从 url 获取参数并从我的数据库 (firebase) 获取适当数据的动态路由 (users/_id.vue)。到目前为止一切顺利。

我想用静态主机（Netlify 或 Zeit Now）托管它，我知道动态路由可以通过生成配置呈现。但这不是我想要的。对于这个特定的路线，我可以使用一个空 shell，然后 Async Javascript 访问 API 并用数据填充 shell。搜索引擎优化在这里并不重要，因为无论如何配置文件都落后于身份验证。

我需要的只是 Nuxt 生成一个“catch all”文件，然后呈现用户配置文件客户端（users/martha 或 users/johndoe）。 Gridsome 通过从 _id.vue 文件中渲染 _id.html 来做到这一点。有没有办法让 Nuxt 也做同样的事情？

感谢您在这里帮助我。

Answer 1

见this。

默认情况下，Nuxt generate 会创建一个名为200.html的文件。

如果在 Netlify 上托管，您需要像这样更新您的 generate 属性：

export default {
  generate: {
    fallback: true, // Uses '404.html' instead of the default '200.html'
  }
}

GitHub Pages 和 Netlify 自动识别 404.html 文件，因此我们只需将 generate.fallback 设置为 true！

我没有使用 Zeit 的经验，但我确实找到了以下 now.json 示例 here。

// inside now.json
{
  "version": 2,
  "routes": [
    { "handle": "filesystem" },
    { "src": "/.*", "dest": "/index.html" }
  ]
}

大多数 SPA 也有要服务的资产，因此您应该在重写路径之前处理文件系统：

希望对您有所帮助！如果您对 Netlify 有任何其他具体问题，我很乐意回答，因为我在他们的 Nuxt 平台上确实有一些生产经验。