Nuxt.js 使用动态单页应用程序的静态站点 Vue.js?

Nuxt.js static site with a dynamic single page application using Vue.js?

我正在阅读有关客户项目的静态站点生成器的文章,发现 Vue.js 和 Nuxt.js 看起来很有前途。由于我可以在 Vue.js 和 React 之间做出选择,所以我现在更喜欢 Vue。

客户的网站大约有 120 个页面,其中包含不会经常更改的预定义内容。所以它似乎是静态网站的完美候选者 - 特别是因为他当前的 WordPress 网站刚刚因糟糕的页面加载时间而受到 Google 的抨击...

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

我确实找到了很多关于 Nuxt.js 关于静态页面或服务器生成页面的信息。但是我的用例是许多静态页面加上一个与 API 对话的静态页面,并且该静态页面也应该使用 Vue.js 制作(同时包括站点范围的页眉、菜单、页脚等。 )

这可能吗?有人做过类似的事情吗?感谢大家的指点!

是的,完全可行。我建议使用 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/

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