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

【问题标题】：Nuxt.js static site with a dynamic single page application using Vue.js?Nuxt.js 静态站点与使用 Vue.js 的动态单页应用程序？
【发布时间】：2021-03-12 14:10:30
【问题描述】：

我正在阅读一个客户项目的静态站点生成器，并遇到了看起来很有希望的 Vue.js 和 Nuxt.js。由于我可以在 Vue.js 和 React 之间进行选择，所以我现在更喜欢 Vue。

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

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

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

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

【问题讨论】：

标签： javascript vue.js nuxt.js static-site

【解决方案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/

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

【讨论】：