在使用 Hapi.js 构建 Web 应用程序时，与 Vue.js 的集成可以提高应用程序的质量和可维护性。Vue.js 是一个开源 JavaScript 框架，可以扩展 HTML 文档，使其变得动态。Hapi.js 是一种用于构建 Node.js Web 应用程序的框架。在本文中，我们将了解如何在 Hapi.js 和 Vue.js 之间建立连接，并使用示例说明如何创建结合了这两个框架的 Web 应用程序。
Hapi.js 与 Vue.js 的集成
为了将 Hapi.js 和 Vue.js 之间建立连接，我们需要准备以下事项：
- Hapi.js 服务器
- Vue.js 项目
在以下步骤中，我们将从头开始创建一个项目，使您可以更好地理解如何将 Hapi.js 和 Vue.js 相结合。
步骤 1：创建 Hapi.js 服务器
首先，您需要创建一个 Hapi.js 服务器。为此，请执行以下步骤。
安装依赖
创建项目的第一步是安装必要的依赖项。打开终端窗口并导航到项目的根目录，然后执行以下命令：
npm init -y npm i @hapi/hapi
npm init -y 命令将生成一个默认的 package.json 文件，npm i @hapi/hapi 命令将安装 Hapi.js 服务器。
编写服务器
创建 server.js 文件，并复制以下内容：
-- -------------------- ---- -------
----- ---- - ----------------------
----- ---- - ----- -- -- -
----- ------ - -------------
----- -----
----- -----------
---
----- ---------------
------------------- ------- -- ---- -----------------
--
-------------------------------- ----- -- -
-----------------
----------------
---
-------这将创建一个名为 server 的 Hapi.js 服务器，并在端口号 3000 上启动它。然后，打开终端并运行以下命令来启动服务器：
node server.js
如果一切顺利，您将看到以下消息：
Server running on http://localhost:3000
步骤 2：创建 Vue.js 项目
现在需要创建一个 Vue.js 项目并将其添加到 Hapi.js 服务器中。执行以下步骤：
安装 Vue CLI
使用以下命令全局安装 Vue CLI（如果已经安装了则跳过此步骤）：
npm install -g @vue/cli
创建 Vue 项目
为了创建 Vue.js 项目，请在终端中进入目标文件夹，并运行以下命令：
vue create frontend cd frontend
这将生成包含 Vue.js 项目的 frontend 文件夹。您将注意到，该文件夹中还包含一个名为 package.json 的文件。此文件包含有关所有 Vue.js 项目所需的节点模块的信息。
测试 Vue 项目
现在，运行以下命令来测试项目：
npm run serve
如果一切正常，您将看到以下消息：
App running at: - Local: http://localhost:8080/
在浏览器中打开 http://localhost:8080/，您将看到 Vue.js 项目的欢迎界面。现在，关闭服务器并停止项目。
步骤 3：将 Vue.js 项目添加到 Hapi.js 服务器
现在，我们需要将 Vue.js 项目添加到 Hapi.js 服务器，因此您可以通过 URL 访问该项目。为此，请按照以下步骤操作：
将 Vue.js 项目构建为静态网站
要在 Hapi.js 中加载 Vue.js 应用程序，需要将其构建为静态文件。然后，将这些文件存储在 public 文件夹中。运行以下命令来构建应用程序：
npm run build
该指令将从 frontend 文件夹中构建应用程序，并将其存储在 frontend/dist 文件夹中。
将 Vue.js 项目添加到 Hapi.js 服务器
要将 Vue.js 项目添加到 Hapi.js 服务器，我们需要将 frontend/dist 文件夹中的所有内容复制到 Hapi.js 项目的 public 文件夹中。现在，打开 server.js 文件，并在以下位置添加代码：
-- -------------------- ---- -------
----- ---- - ----------------
-- ---
--------------
------- ------
----- ------------
-------- -
---------- -
----- -------------------- ---------
-
-
---
-- ---该代码告诉 Hapi.js 服务器将 URL 参数指向 public 文件夹，其中存储了您的 Vue.js 项目。
现在保存文件并重新启动服务器。您的 Hapi.js 服务器现在应该可以加载 Vue.js 应用程序。在浏览器中打开 http://localhost:3000/，看看您的 Vue.js 项目是否已成功加载。
示例代码
以下代码片段演示了如何将 Hapi.js 和 Vue.js 结合在一起：
-- -------------------- ---- -------
----- ---- - ----------------------
----- ---- - ----------------
----- ---- - ----- -- -- -
----- ------ - -------------
----- -----
----- -----------
---
--------------
------- ------
----- ------------
-------- -
---------- -
----- -------------------- ---------
-
-
---
----- ---------------
------------------- ------- -- ---- -----------------
--
-------------------------------- ----- -- -
-----------------
----------------
---
-------结论
到此为止，您已经了解了 Hapi.js 和 Vue.js 的集成方式以及如何创建结合了这两个框架的 Web 应用程序。您应该可以使用上述示例代码以及本文提供的其他信息来创建自己的应用程序。祝好运！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67331d840bc820c582409b28