Nuxt.js static 站点与使用 Vue.js 的动态单页应用程序？

Question

我正在为一个客户项目阅读 Static Site Generators 并遇到 Vue.js 和 Nuxt.js 看起来很有希望。 因为我可以在 Vue.js 和 React 之间进行选择，所以我现在更喜欢 Vue。

客户的网站大约有 120 个页面，其中包含不会经常更改的预定义内容。 因此，它似乎是 static 网站的完美候选人 - 特别是因为他当前的 WordPress 网站刚刚因为糟糕的页面加载时间而被谷歌抨击......

“问题”或问题是，除了这 120 个页面之外，还需要一个页面基本上是一个单页面应用程序，它通过 API 从后端动态获取数据。 要编码这个动态页面，如果我也可以使用 Vue.js 将是理想的。

我确实找到了很多关于 Nuxt.js 关于 static 页面或服务器生成页面的信息。 But my use case would be many static pages plus one static page that talks to an API and that static page should be made with Vue.js as well (while including the sitewide header, menu, footer, etc.)

这可能吗？有人做过类似的事情吗？ 感谢每一个指针！

Answer 1

是的，完全可行。 我建议使用类似 strapi.io 或 contentful 来创建包含每个组件内容的页面。

您可以在 nuxtjs 和它自己的 cms 下将站点的每个部分创建为一个组件，请参见下面的示例。

https://strapi.io/blog/creating-strapi-dynamic-zone-in-nuxtjs-app

在页面下，您创建“_.vue”，它将拾取任何“slug”，这就是您使用 slug 获取页面内容的方式。

另一个例子 - https://raoulkramer.de/nuxt-js-static-page-generator-with-dynamic-pages/

希望以上能给你一个更好的主意。