nuxt.js - Nuxt 为所有动态路由生成带有回退文件的静态站点

Question

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

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

所以我正在使用动态路由(users/_id.vue)从url获取参数并从我的数据库(firebase)获取适当的数据。到现在为止还挺好。

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

我所需要的只是 Nuxt 生成一个“捕获所有”文件，然后呈现用户配置文件客户端(用户/玛莎或用户/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 and Netlify recognize the 404.html file automatically, so setting generate.fallback to true is all we have to do!

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

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

Most SPAs have assets to serve as well, so you should handle the filesystem before rewriting the path:

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