Question

<块引用>

嘿[服务]，这是一些 JSON。您能否将数据放入 Vue 模板并将生成的 HTML 站点发回给我？

我有一项服务，用户可以在其中创建表单。保存表单后，我想从中生成一个静态 HTML 页面。这个想法是将生成的 HTML 文档显示给实际回答表单问题的不同用户组。

创建表单后，我将带有表单规范的 POST 请求发送到 Static Site G 生成器 S 服务（SSGS）我正在尝试建立。 JSON 负载如下所示：

{
  "formId": 1,
  "questions": [
    {
      "questionNo": 0,
      "type": "rating",
      "title": "How much do you like the taste of toothpaste?"
    },
    
    /* ... more questions may exist ... */
  ]
}

这个想法是让 SSGS 从这个表单创建一个独立的静态网站，并且只用这个表单。我打算将生成的单个站点存储在 S3 存储桶中。每个表单最终都会以个体的形式出现，与其他现有表单无关。

为什么采用这种方法，而不是每个表单都有一个路由的单一服务？我将在功能有限的设备上显示这些表单。目的是让设备一次下载整个网站及其资产，然后将其显示给用户。

我目前拥有的

我使用 Vue 来显示表单的问题和输入。我有一个正在运行的 Nuxt.js 应用程序，它可以接受 POST 请求并将其有效负载传递给一个 Vue 组件，该组件可以很好地呈现每个问题。生成的 HTML 文档作为对发起它的 HTTP POST 请求的响应发送回。简而言之：

用户创建表单
表单服务发送一个 POST 请求，其中包含一个描述所创建表单的 JSON 正文
SSGS 根据表单描述呈现 HTML 文档
表单服务接收上述 HTML 文档
（未实现） 表单服务在 S3 中存储 HTML 文档

我在这里遇到的问题是 Nuxt 创建的 HTML 文档有大量对外部文件的引用。当表单服务收到此 HTML 文档作为响应时，这些链接文件均不可访问。

<link rel="preload" href="/_nuxt/runtime.js" as="script">
<link rel="preload" href="/_nuxt/commons/app.js" as="script">
<link rel="preload" href="/_nuxt/vendors/app.js" as="script">
<link rel="preload" href="/_nuxt/app.js" as="script">
<link rel="preload" href="/_nuxt/pages/index.js" as="script">

我一直在寻找方法告诉 Nuxt 将每个文件的内容写入生成的 HTML 文档的 <body> 中，但到目前为止我在这方面没有运气。

但这并不是真正的静态网站生成，是吗？

老实说，我仍然对这个概念耿耿于怀。我正在服务器上渲染一个页面，但我将其作为对请求的响应，就像任何传统服务器在响应浏览器的 GET 请求时所做的那样。这只是服务器端渲染，对吧？由于链接文件的问题，我担心这可能还不够。

我知道 Nuxt 可以选择生成真正的静态站点。它的完成方式是（显然）：

在终端中运行 npm run generate
创建一个 dist 文件夹，其中包含所有必需的 HTML 文件和资产
这个文件夹需要手动部署到某个地方

这种方法可能会准确地为我提供我想要在 S3 中存储的内容。然而，它似乎是针对手动一遍又一遍地生成相同网站的，这给我留下了很多问题：

如何在每次 SSGS 收到 POST 请求时触发新站点的生成？
如何将自定义 JSON 负载传递给呈现网站的 Vue 模板？
我应该如何管理每一代的产出？每个表单都是独一无二的 - 在处理之前我无法覆盖前一个表单。
我可以将文件直接发送到 S3，而不是将文件保存在 dist 目录中吗？

围绕静态生成器创建某种包装器服务是否是我唯一的选择，该服务能够运行 shell 命令来触发 npm run generate、随机播放 dist 的内容并将数据移动到 S3？

>

是否有更好的工具可以根据需要从动态内容创建静态网站？

按需生成静态网站

我目前拥有的

但这并不是真正的静态网站生成，是吗？

0 个答案: