Hapi 是一款 Node.js 的 Web 开发框架，其设计理念是由插件构建，通过不同的插件来实现不同的功能。Inert 就是一个用于在 Hapi 中展示静态资源的插件，通过它我们可以很方便地将静态资源，如文本、图片、视频等文件在 Web 页面上进行展示。
本篇文章将详细介绍在 Hapi 框架中使用 Inert 插件展示静态资源的实现方式，并提供相应的代码示例。
安装 Inert 插件
在开始使用 Inert 插件之前，我们需要在项目中进行安装。可以通过 npm 安装，具体命令如下：
npm install @hapi/inert
配置静态文件目录
在使用 Inert 插件之前，我们需要先确定静态文件目录的位置。这里我们将以 public 目录为例进行说明，该目录在项目根目录下，包含了所有的静态资源文件。
我们需要在启动 Hapi 服务之前，先使用 Inert 插件来注册 public 目录，代码如下：
-- -------------------- ---- -------
----- ---- - ----------------------
----- ---- - ----------------
----- ---- - ----- -- -- -
----- ------ - -------------
----- -----
----- -----------
---
----- ----------------------------------------
--------------
------- ------
----- ------------
-------- -
---------- -
----- -------------------- ---------
-
-
---
----- ---------------
------------------- ------- -- ---- -----------------
--
-------------------------------- ----- -- -
-----------------
----------------
---
-------上述代码中，我们使用 require('@hapi/inert') 导入 Inert 插件，并在注册时注册到 Hapi 服务中。然后使用 server.route() 方法创建一个路由，将所有静态资源的请求都指向 public 目录。Path.join(__dirname, 'public') 代码则指示了 public 目录的位置。
通过 URL 访问静态资源
以上代码已经完成了 Inert 插件的注册，现在我们可以通过浏览器访问静态资源了。假设我们的项目根目录下的 public 目录下有一个名为 index.html 的文件，我们可以通过 http://localhost:3000/index.html 来访问这个静态资源文件。
当然，我们还可以通过相对路径的形式来访问该资源：
<img src="images/my-image.jpg" alt="My Image">
上述代码将从 public 目录下的 images 目录中查找 my-image.jpg 文件，并在页面中展示该文件。
应用场景
Inert 插件在实际应用中有着广泛的用途，如在 Web 服务中展示图片、CSS、JavaScript、视频等静态资源文件。
例如，我们可以在 Web 页面中使用以下代码来加载一个图片资源：
<img src="images/my-image.jpg" alt="My Image">
还可以通过以下方式来引用 CSS 文件：
<link rel="stylesheet" type="text/css" href="css/my-stylesheet.css">
需要注意的是，若路径书写不当，Inert 插件可能会导致资源无法正常加载，因此我们需要详细了解 Inert 插件对于静态资源的路径处理规则。
总结
本文详细介绍了在 Hapi 框架中使用 Inert 插件展示静态资源的实现方式，并提供了示例代码供大家参考。Inert 插件通过简单的配置，让我们可以轻松地展示 Web 页面中所需要的静态资源文件。在后续的 Web 开发过程中，我们可以根据实际需要，结合 Inert 插件进行更加便捷高效的开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a1fe3448841e9894e45978