跳到主要内容

nuxt2

Nuxt.js 是一个基于 Vue.js 的高级框架，旨在创建通用的 Vue 应用。通过抽象掉客户端/服务端的分离和预渲染，Nuxt.js 使得构建服务端渲染（SSR）的 Vue 应用变得更加简单。除了服务端渲染，Nuxt.js 还支持静态站点生成（Static Site Generation, SSG），使得它成为开发高性能、SEO 友好的 Web 应用的优秀选择。

nuxt2 架构​

Nuxt.js 是一个基于 Vue.js 的框架，旨在简化 Web 应用的开发，提供了服务端渲染（SSR）、静态站点生成（SSG）、单页面应用（SPA）等多种模式。

  1. 文件系统路由 Nuxt.js 使用基于文件的路由系统。开发者只需在 pages 目录下创建 .vue 文件或目录，Nuxt.js 会自动生成对应的路由配置。这种方式简化了路由的配置过程，提高了开发效率。

  2. 自动代码分割 Nuxt.js 自动为每个路由页面生成 JavaScript 和 CSS 的代码块（chunks）。这意味着只有当路由被访问时，对应页面的代码才会被加载。这种代码分割策略有助于提高应用的加载速度和性能。

  3. 服务端渲染（SSR） Nuxt.js 内置了对服务端渲染的支持，能够在服务器上预先渲染 Vue 组件为 HTML，从而加快首屏显示速度，同时改善 SEO。Nuxt.js 处理 SSR 的过程中涵盖了数据预取、状态管理和路由中间件等关键步骤。

  • PM2 是一个流行的 Node.js 应用程序进程管理器，它可以帮助你在生产环境中管理和保持应用的持久运行，提供负载均衡、日志管理、应用监控等功能。使用 PM2 管理 Nuxt.js 应用（尤其是 Nuxt 2 应用）可以让你轻松地在后台运行、监控和维护你的 Nuxt 应用。

  1. 静态站点生成（SSG） Nuxt.js 提供了 nuxt generate 命令，可以将 Vue 应用预渲染为静态 HTML 文件，适用于静态托管环境。这种方式结合了 SSR 的优点和静态网站的便利性。

  2. 插件系统 Nuxt.js 的插件系统允许开发者在应用的生命周期中的特定时点注入代码，例如在应用初始化前。插件系统为应用的扩展提供了灵活性，方便集成第三方库和自定义功能。

  3. 模块系统 Nuxt.js 通过模块系统允许开发者和社区构建可复用的功能包，用于扩展 Nuxt.js 应用。模块可以用来添加全局 CSS、注册插件、配置 webpack 加载器等。

  4. Vuex 集成 对于需要状态管理的应用，Nuxt.js 内置了对 Vuex 的支持。通过在 store 目录下创建文件，Nuxt.js 会自动将其转换为 Vuex store 实例，无需手动配置。

  5. 服务器和中间件 Nuxt.js 提供了一个强大的服务器功能，支持中间件，允许开发者执行服务端逻辑，如处理 API 请求、服务端路由保护等。

vue ssr​

Vue SSR（Server-Side Rendering，服务器端渲染）是一种技术，它允许 Vue 应用在服务器端执行，预先生成 HTML 内容，然后发送到客户端。这与传统的客户端渲染（CSR）相反，在 CSR 中，应用的 HTML 是在浏览器中通过 JavaScript 动态生成的。Vue SSR 主要通过官方支持的 vue-server-renderer 包来实现。

核心组件​

  1. Vue 实例：在服务器端，Vue 实例被创建来响应每个请求。与客户端 Vue 应用类似，这些实例是应用的基础，定义了组件树、路由、状态管理等。
  2. Renderer：vue-server-renderer 提供了两种渲染器：createRenderer 和 createBundleRenderer。渲染器的作用是将 Vue 实例渲染成 HTML 字符串。
  • createRenderer：用于渲染普通的 Vue 应用。
  • createBundleRenderer：用于渲染由 webpack 打包的 Vue 应用，支持代码分割、热重载等高级功能。
  1. Bundle Renderer：当使用 Vue SSR 与 webpack 的服务器构建时，createBundleRenderer 可以直接渲染 webpack 打包后的应用代码。这种方式支持基于 Vue 组件的代码分割和懒加载。

渲染流程​

  1. 请求处理：每当服务器接收到一个请求时，它会为该请求创建一个新的 Vue 实例。
  2. 路由解析：使用 Vue Router 在服务器端解析当前请求的路由。
  3. 数据预取：在渲染前获取当前路由所需的所有数据。这通常通过在组件内部定义特定的静态方法（如 asyncData）来实现。
  4. 渲染为 HTML：使用渲染器将 Vue 实例渲染成 HTML 字符串。这一步包括虚拟 DOM 树的创建和遍历，以及 HTML 字符串的生成。
  5. 客户端激活：渲染出的 HTML 会被发送到客户端，Vue 客户端脚本将接管这些静态标记，转换为动态的、可交互的应用。

服务器和客户端代码同构​

Vue SSR 应用的一个关键概念是代码同构——即大部分代码可以同时在服务器和客户端运行。为了实现这一点，Vue SSR 需要开发者在编写应用时遵循特定的模式和约定，比如避免使用任何特定于浏览器的 API，除非在特定的生命周期钩子中。