理解经典的 SPA 和 Nuxt SPA

单页应用程序（SPA），也称为经典 SPA，是一种在浏览器上加载一次，并且在应用程序的整个生命周期中不需要我们重新加载和重新渲染页面的应用程序。这与多页应用程序（MPA）不同，在多页应用程序中，每一次更改和与服务器的每一次数据交换都需要我们从服务器到浏览器重新渲染整个页面。

在经典/传统的 SPA 中，提供给客户端的 HTML 相对来说是空的。JavaScript 一旦到达客户端就会动态地渲染 HTML 和内容。React、Angular 和 Vue 是创建经典 SPA 的流行选择。然而，不要与处于 spa 模式下的 Nuxt 应用程序（我们称之为 Nuxt SPA）混淆，即使 Nuxt 为你提供了一个选项，只需一行配置即可开发 “SPA”，如下所示：

// nuxt.config.js
export default {
  mode: 'spa'
}

正如我们在第 14 章 “使用代码检查器、格式化程序和部署命令” 中学习的那样，Nuxt 的 SPA 模式仅仅意味着你失去了 Nuxt 和 Node.js 的服务器端功能，就像将通用 SSR Nuxt 应用程序转换为静态生成（预渲染）的 Nuxt 应用程序一样。spa 模式的 Nuxt 应用程序也是如此——当你使用上述配置时，你的 spa 模式 Nuxt 应用程序将变成一个纯粹的客户端应用程序。

但是，spa 模式的 Nuxt 应用程序与你从 Vue CLI、React 或 Angular 创建的经典 SPA 有很大不同。这是因为，在构建应用程序之后，你的（经典）SPA 的页面和路由将在运行时通过 JavaScript 动态渲染。另一方面，spa 模式的 Nuxt 应用程序中的页面将在构建时预渲染，并且每个页面中的 HTML 与经典 SPA 一样 “空”。这就是事情开始变得令人困惑的地方。让我们看一下以下示例。假设你的 Vue 应用程序中有以下页面和路由：

src
├── favicon.ico
├── index.html
├── components
│   ├── about.vue
│   ├── secured.vue
│   └── ...
└── routes
    ├── about.js
    ├── secured.js
    └── ...

你的应用程序将被构建成以下分发：

dist
├── favicon.ico
├── index.html
├── css
│   └── ...
└── js
    └── ...

在这里，你可以看到只有 index.html、/css/ 和 /js/ 文件夹被构建到 /dist/ 文件夹中。这意味着你的应用程序的页面和路由将在运行时通过 JavaScript 动态渲染。然而，假设你的 spa 模式 Nuxt 应用程序中有以下页面：

pages
├── about.vue
├── secured.vue
├── ...
└── users
    ├── about.js
    ├── index.vu
    └── _id.vue

你的应用程序将被构建成以下分发：

dist
├── index.html
├── favicon.ico
├── about
│   └── index.html
├── secured
│   └── index.html
├── users
│   └── index.html
└── ...

正如你所见，你的应用程序的每个页面和路由都构建了一个 index.html 文件并放置在 /dist/ 文件夹中——就像你为通用 SSR Nuxt 应用程序生成的静态站点一样。因此，在这里，我们可以说你将构建和部署的 spa 模式 Nuxt 应用程序是一个 “静态” SPA，而不是 “动态” 的经典 SPA。当然，你仍然可以使用以下部署命令像部署通用 SSR Nuxt 应用程序一样部署你的 spa 模式 Nuxt 应用程序。这将使其在运行时变为 “动态”：

$ npm run build
$ npm run start

但是，在 Node.js 主机上部署 Nuxt SPA 应用程序可能有点过分，因为你选择 spa 模式 Nuxt 应用程序并且不想为你的 SPA 使用 Node.js 主机肯定有一些很好的理由。因此，将 Nuxt SPA 预渲染为静态生成的应用程序（我们称之为静态生成的 Nuxt SPA）可能更明智。你可以像通用 SSR Nuxt 应用程序一样，使用 nuxt export 命令轻松地预渲染你的 Nuxt SPA。

这就是本章的全部内容：在 spa 模式下开发 Nuxt 应用程序并在将其部署到静态托管服务器（如 GitHub Pages）之前生成所需的静态 HTML 文件。因此，让我们从安装和设置环境开始。