在 Node.js 中使用 Vue.js 进行服务端渲染（SSR）教程

前言

在现代 Web 开发中，前端框架已成为开发大型 Web 项目的标准。Vue.js 是一个受欢迎的前端框架，它使得开发交互式用户界面变得更容易。然而，由于浏览器渲染的限制，只有在浏览器中使用 Vue.js 的应用程序可能无法满足我们的需求。为了解决这个问题，我们可以使用服务端渲染（SSR）来提高网站的性能和可访问性。

本文将介绍如何在 Node.js 中使用 Vue.js 进行服务端渲染，包括从头开始创建一个 Vue.js SSR 项目、使用 Vuex 进行状态管理、异步数据获取和优化等方面的内容。

准备工作

在开始之前，请确保你已经安装了 Node.js 和 Vue.js。你可以使用下面的命令来检查是否已经安装：

---- --
--- --

如果没有安装，请参考官方文档进行安装。

创建一个新的 Vue.js SSR 项目

首先，我们需要创建一个新的 Vue.js 项目，并添加 SSR 支持。

使用 Vue.js 官方提供的 vue-cli 工具，我们可以快速创建一个基本的 Vue.js 项目。在终端中输入以下命令：

--- ------ ----------

这将创建一个名为 my-project 的 Vue.js 项目。在 my-project 目录中输入以下命令以启动开发服务器：

-- ----------
--- --- -----

现在，我们已经成功启动了一个基本的 Vue.js 项目。

接下来，我们需要将现有项目转换为 SSR 项目。我们可以使用 vue-cli-plugin-ssr 插件来快速完成此操作。在终端中输入以下命令：

--- --- ---

这将为我们的现有项目添加 SSR 支持。

编写 SSR 的入口文件

一旦我们的项目准备就绪，我们需要为 SSR 编写一个入口文件。入口文件是一个 JavaScript 文件，负责将我们的 Vue.js 应用程序注入到 HTML 模板中，以便在服务器上呈现。

在项目的 src 目录中创建一个名为 entry-server.js 的新文件。这是我们的 SSR 入口文件。具体代码如下：

------ - --------- - ---- --------

------ ------- ------- -- -
  ------ --- ----------------- ------- -- -
    ----- - ---- ------- ----- - - -----------

    ------------------------

    ----------------- -- -
      ----- ----------------- - -----------------------------
      -- --------------------------- -
        ------ -------- ----- --- --
      -

      ------------
        ------------------------------- -- -
          -- --------------------- -
            ------ ---------------------
              ------
              ------ -------------------
            --
          -
        --
      --------- -- -
        ------------- - -----------
        ------------
      --
    -- -------
  --
-

该文件的目的是从我们的 main.js 文件中创建一个新的 Vue.js 应用程序实例，并返回包含当前上下文状态的 Promise 对象。

让我们分析一下代码：

  • createApp() 函数返回一个包含 Vue.js 应用程序、路由、以及 Vuex 状态管理的对象。
  • router.push(context.url) 将路由推入到与服务器匹配的 URL 中。
  • router.getMatchedComponents() 返回与当前 URL 匹配的组件列表。
  • 如果没有匹配到组件，将返回 404 错误。
  • Promise.all() 将异步获取和加载每个匹配组件的数据，并将其存储在应用程序的状态对象中。这样做是为了在服务器端呈现应用程序的所有数据，而无需在客户端重新获取数据。

现在，我们已经编写了一个 SSR 的入口文件，并准备好在服务器上运行。

编写服务器端脚本

接下来，我们需要编写服务器端代码，将我们的 Vue.js 应用程序提供给客户端。

在项目的根目录中创建一个名为 server.js 的新文件。这是我们的服务器端代码。具体代码如下：

----- ------- - ------------------
----- - -------------------- - - ------------------------------
----- -- - -------------
----- ---- - ---------------

----- ------ - ---------
----- -------- - ----------------

-------- ---------------- -
  ----- ---------- - ----------------------- ----------------------------
  ----- ------ - -------------------------------------- ---------

  ----- ------------ - ----------------------- ----------------------
  ----- -------- - ----------------------------- --------

  ------ ---------------------------- -
    ---------
    ---------------- -----
  --
-

----------------------------------

--------------- ----- ---- -- -
  ----- ------- - - ---- ------- -
  -------------------------------- ----- ----- -- -
    -- ----- -
      ----------------
      ------ ---------------------------- -------
    -
    --------------
  --
--

------------------- -- -- -
  ------------------- ------- -- ---- ------
--

让我们分析一下代码：

  • 我们首先通过 Express 创建一个名为 server 的服务器实例。
  • createRenderer() 函数将从预生成的 server-bundle.json 文件中提取应用程序程序代码，并将其注入到 HTML 模板中。
  • express.static() 中间件用于提供静态资源，例如 JavaScript 或 CSS 文件。
  • server.get() 将针对所有 URL 进行处理，并由 renderer.renderToString() 函数呈现 Vue.js 应用程序。这正是我们从 entry-server.js 文件中调用的函数。
  • 最后，我们在服务器上启动一个监听端口为 3000 的 Express 服务器。

使用 Vuex 进行状态管理

现在我们已经完成了一个简单的 Vue.js SSR 项目，但是我们的应用程序状态是在客户端内部管理的。如果我们希望在服务器上呈现应用程序的所有状态，我们可以使用 Vuex 这个状态管理库。

在主目录 src 中创建一个名字为 store.js 的新文件。这是我们的 Vuex 状态管理文件。具体代码如下：

------ --- ---- -----
------ ---- ---- ------

-------------

------ -------- ------------- -
  ------ --- ------------
    ------ -
      ------ --
    --
    ---------- -
      ---------------- ------ -
        ----------- - -----
      -
    --
    -------- -
      ------------------- -
        ------ --- --------------- -- -
          -- ----- ----- -----
          ----- ----- - ------- ----- ---- ------ ----- ----
          --------------------------- ------
          ---------
        --
      -
    --
    -------- -
      ------ ----- -- -----------
    -
  --
-

createStore() 函数将创建一个包含所有状态管理内容的 Vuex store 对象，并将其导出。

现在我们需要将这个 store 注入到我们 main.js 文件中。在 src/main.js 文件中加入以下内容：

------ - --------- - ---- --------
------ - ----------- - ---- ---------

------ ------- ------- -- -
  ----- - ---- ------ - - -----------

  ----- ----- - -------------
  ---------- - -----

  ------ -------------
    ------------------------
  ---------- -- -
    ------ --- ----------------- ------- -- -
      ---------------------

      ------------- - -----------
      ------------
    --
  ----------------
-

现在在 entry-server.js 中就可以通过 store 参数访问应用程序状态。在异步数据加载时，将数据存储在 store 中，而不是在组件内。例如，我们可以做以下修改：

----- --- - --- -----
  -------
  ------
  ------- - -- -------
  --------- -
    ----------------------------------
  -
--

异步数据获取

如果我们需要在服务端渲染时从服务端获取数据，我们可以在组件中实现异步数据获取。Vue.js 官方已提供了 asyncData() 方法，它允许我们等待异步数据加载完成后再渲染应用程序。

我们需要做的是在组件中添加一个 asyncData() 方法，其中包含加载数据的异步操作。例如，我们可以这样做：

------ ------- -
  ----------- ----- -- -
    ------ --- --------------- -- -
      -- ----- ----- -----
      ----- ----- - ------- ----- ---- ------ ----- ----
      ------------------------- ------
      ---------
    --
  -
-

在我们的 SSR 入口文件中，Promise.all() 将等待所有数据加载完成。我们的服务端渲染代码将基于组件的异步数据完成，以等待数据加载完成并将其存储在应用程序状态中。

------------
  ------------------------------- -- -
    -- --------------------- -
      ------ ---------------------
        ------
        ------ -------------------
      --
    -
  --
--------- -- -
  ------------- - -----------
  ------------
--

优化

要在 SSR 中正确实现性能优化，我们可以使用以下技术：

  • 预取数据：在路由切换时预取数据，以加快页面速度。
  • 预先加载组件：将常用组件预先加载到客户端内存中，以减少启动时间。
  • 代码分割：将大型 Vue.js 应用程序拆分为多个代码块，以加快加载时间。

结论

本文提供了一个完整的 Vue.js SSR 教程，从创建基本项目、使用 Vuex 进行状态管理、异步数据获取和优化等方面详细介绍了 SSR 的过程。

Vue.js SSR 提供了许多优势，特别是提高页面渲染性能和可访问性。通过按照本文的教程，你可以创建一个完整的 Vue.js SSR 项目，并且可以根据需要进行定制。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/670df3a65f551281025f2b2b

阅读全文

精选内容

相关推荐

    暂无