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

Question

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

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

因此，我正在使用动态路由（users/_id.vue）从 url 获取参数并从我的数据库（firebase）获取适当的数据。到目前为止，一切都很好。

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

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

谢谢你在这里帮助我。

Answer 1

看到这个。

默认情况下，Nuxt 生成会创建一个名为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示例。

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

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

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