SPA 模式下的 Nuxt.js 静态生成导致与内部加载组件相同的输出

Question

我使用“npx create-nuxt-app my-app”创建了一个全新的应用程序，并选择了除了将模式设置为 SPA 之外的所有默认选项。

我运行 npm run generate 并希望 dist/*.html 文件包含我的页面/*.vue 的渲染内容，但所有生成的 HTML 都包含：

  ...
  <div id="nuxt-loading" aria-live="polite" role="status">
    <div>Loading...</div>
  </div>
  ...

我希望从文件中获取内容，给定样板 index.vue，index.html 应该包含 Vue 欢迎消息的 HTML。

我的期望错了吗？出于性能和 SEO 的原因，我想利用静态生成。我所有的页面都是静态的。

Answer 1

回答我自己的问题：这是预期的行为。

显然我应该为这种情况选择“通用”模式，稍后仍将充当 SPA。

让我感到困惑的部分是将“通用”模式描述为“服务器端渲染”。将静态生成的文件提供给服务器渲染 - 显然是的。

我一直认为“服务器渲染”需要实际渲染该 HTML，这不是我想要的。我想要静态生成的文件，稍后将成为 SPA。

如果您从浏览器的角度来看，无论是 node.js 新渲染的内容，还是一年前生成的静态 HTML 文件，任何 HTML 都将被服务器渲染。

SSR 和静态生成仍然经常被描述为分离的方法，这也错误地暗示“静态生成”不是 SSR。在这种情况下它在哪里。