在前端开发中，我们常常需要处理敏感信息（如 API 密码、密钥等）的配置以及环境变量的设置。为了避免将这些信息明文写入代码或者提交至版本库造成安全问题，我们可以使用 .env 文件来管理这些配置，同时利用 poi-plugin-dotenv 插件将其注入到应用程序中。
本文将介绍如何使用 poi-plugin-dotenv 插件，为读者提供学习和指导意义，并带有具体的示例代码。
什么是 poi-plugin-dotenv
poi-plugin-dotenv 是一个 Poi 插件，用来将系统变量、环境变量和 .env 文件中的配置注入到应用程序的 process.env 中，从而使得这些配置能够对后续的应用程序代码生效。
安装
在使用 poi-plugin-dotenv 前，我们需要先将其安装到项目中。可以通过以下命令来完成安装：
--- ------- ----------------- ----------
安装完成后，在项目的 package.json 中应该会看到 poi-plugin-dotenv 的相关依赖。
使用
在配置项目时，我们需要将 poi-plugin-dotenv 添加到 Poi 的插件数组中，同时根据需要设置环境变量或 .env 文件中可用的配置项。
基本用法
基本的使用方法为启用插件并注入所有 .env 内的变量。
-- -------------
----- ------ - -----------------------------
-------------- - -
-------- -
--------
-
--设置环境变量
在某些情况下，我们需要手动设置环境变量。为了实现这一点，可以在调用 poi-plugin-dotenv 时传入一个配置对象，它包含环境变量的名称和值。
-- -------------
----- ------ - -----------------------------
-------------- - -
-------- -
--------
---------- ------- -------
--
-
--此时在应用程序中，可通过 process.env.MY_SECRET 访问到该环境变量。
限制使用的变量
在某些情况下，我们并不想将所有 .env 中的变量注入到应用程序中。为了满足这种需求，我们可以用 dotenv-webpack 提供的 Systemvars 和 Safe 模式来限制使用的变量。
Systemvars
使用 Systemvars 模式时，将不会从 .env 文件中读取变量，而是直接使用系统环境变量。
-- -------------
----- ------ - -----------------------------
-------------- - -
-------- -
--------
----------- ----
--
-
--Safe
在安全模式下，只有在 .env 文件中具有默认值的变量才会被注入到应用程序中，而不是在应用程序中进行硬编码。这在防止意外泄漏敏感信息方面非常有用。
-- -------------
----- ------ - -----------------------------
-------------- - -
-------- -
--------
----- ----
--
-
--示例代码
以下代码展示了如何使用 poi-plugin-dotenv 注入一个 .env 中的变量。
-- ------------ ------------------ -- -------- ---------------------------------
当我们使用 poi-plugin-dotenv 启动应用程序时，可以看到在控制台输出了 .env 中设置的 API_KEY 的值。
总结
通过使用 poi-plugin-dotenv，我们可以更方便地管理敏感信息和环境变量，并且减少了需要硬编码的量。通过本文的介绍与示例，相信读者已能够熟练地使用 poi-plugin-dotenv 来实现以上的功能。
参考链接
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60057c5981e8991b448ebda0