NuxtJS 可以生成纯 HTML 吗？

Posted 2023-02-16

【中文标题】NuxtJS 可以生成纯 HTML 吗？

【英文标题】：NuxtJS possible to generate JUST plain HTML?

【发布时间】：2021-05-30 14:40:51

【问题描述】：

我真的很好奇我是否正确使用 NuxtJS。我只想生成 html 页面，所以基本上我不需要任何 javascript！ 但是每次我用 Nuxt 生成任何页面时，里面都有很多 JS。

现在我设法删除了客户端脚本：

 render: 
   injectScripts: false
 ,

在nuxt.config.js .. 但现在无论如何都有一个 inlineJS 脚本：

window.__NUXT__=staticAssetsBase:"/_nuxt/static/1614565042",serverRendered:!0,routePath:'"/"'

甚至

<script>window.__NUXT__=staticAssetsBase:"/_nuxt/static/1614566041"</script>
<script src="/_nuxt/3dacfb6.js" defer></script>
<script src="/_nuxt/47380cc.js" defer></script>
<script src="/_nuxt/fbdf180.js" defer></script>
<script src="/_nuxt/77b577f.js" defer></script>
<script src="/_nuxt/04f2e32.js" defer></script>

在生成的 HTML 中。我不明白为什么没有简单的模式来生成非常简单的 HTML 页面而没有任何开销。 它只是为我重用组件并使用一些非常简单的变量.. 根本不需要使用 JS，我正在生成 CSS 并与 YARN 组合，所以不需要其他任何东西..

我也不喜欢data-* 标签。我真的不需要它们。我想创建在客户端没有功能的简单 HTML 页面，但仍然具有注入（服务器端）并在多个页面中重复使用的“组件”功能。

我使用这个配置运行 Nuxt：

  target: 'static',
  render: 
    injectScripts: false
  ,
  hooks: 
    'vue-renderer:s-s-r:context'(context) 
      const routePath = '';
      context.nuxt = '';
    ,
  ,

尽可能多地删除 JS 和标准的东西......但似乎仍然无法删除 Everything 并只生成一个纯 HTML 而不需要任何额外的东西。

所以问题是：

如何使用 NuxtJS 生成静态页面，而不必包含任何 JS 文件。特别是标准的 NUXT-JavaScript 代码？

如果您认为我最好不要将 NuxtJS 用于简单干净的 HTMl 页面，请告诉我 :)

【问题讨论】：

有可能。 check out this line in the renderer.js file。看起来您只需将 render: spaScripts: false 添加到您的 nuxt.config.js 文件中。

@Ohgodwhy AFAIK 这是错误的！只需再次检查此LINE：变量$serializedSession 正在附加到应用程序中，而没有任何 if 语句。我还尝试将它添加到我的 nuxt.config.js 这并没有删除 <script>window.__NUXT__=</script> 部分。

【参考方案1】：

“如果您认为我最好不要将 NuxtJS 用于简单干净的 HTMl 页面，请告诉我 :)”

最好不要使用 Nuxt。它是一个建立在 Vue 之上的 JavaScript 框架，这使得开发 s-s-r SPA 应用程序变得超级简单。

您提到您不想使用 JavaScript，但您想访问组件和简单变量。对我来说，听起来你最好使用 php，并且可能会喜欢 Laravel 框架（尽管如果你不想要整个框架的开销，我会推荐普通的旧 PHP）。

Laravel

【讨论】：

实际上 PHP 对我来说从来都不是路，除非真的有必要，这就是为什么我想要一个静态站点由我不需要安装的东西组合在一起，或者大多数时候都附带 Linux 服务器.就像 NodeJS 预装在所有 Debian/Ubuntu/CentOS 中一样。无论如何感谢您的建议，但 l​​aravel 不是我想要的。

【参考方案2】：

Nuxt 并非仅用作 s-s-r，它确实具有整个 hydration 部分，即使在使用 full static 时也会为您的应用带来交互性。您可能可以使用另一个 SSG，例如 11ty 或 hugo 来不加载任何 JS。

但您也可以使用vue-lazy-hydration 并在应用的顶层防止水合作用。它仍处于测试阶段，但应该可以解决问题。

【讨论】：

谢谢！我确实切换到了 Hugo，我认为它很好地解决了我在服务器端生成静态文件的问题。感谢 NuxtJS ATM 不能只生成没有任何 JS 的普通 HTMl .. 真可怜。

这不是框架的目的。 Hugo 的超酷之处在于构建时间，Go 的执行速度比 JS 快得多！