在现代前端开发中，使用环境变量是非常重要的一环。经常需要我们在不同的部署环境中使用不同的配置，或者在不同的开发阶段使用不同的参数等。
在 Node.js 环境中，我们可以通过 dotenv 模块来方便地加载环境变量。但是，当我们需要在前端环境中使用环境变量时，这个问题就变得有些复杂了。
这时候，@morgs32/dotenv 就派上用场了。它是基于 dotenv 模块的一个前端版本，可以方便地加载环境变量，并且支持在不同的部署环境中使用不同的配置。
安装
在你的前端项目中，可以使用 npm 来安装 @morgs32/dotenv：
npm install @morgs32/dotenv
使用方法
在前端项目中，要使用 @morgs32/dotenv，首先需要将环境变量写入一个文件中。这个文件最好命名为 .env。
# .env API_URL=https://api.example.com DEBUG=true
然后，在你的前端代码中按如下方式加载环境变量：
import dotenv from '@morgs32/dotenv'; dotenv.config();
这样，.env 文件中的环境变量就会被加载到 process.env 对象中。
console.log(process.env.API_URL); // https://api.example.com console.log(process.env.DEBUG); // true
如果你需要在不同的部署环境中使用不同的配置，你可以按如下方式指定不同的 .env 文件：
import dotenv from '@morgs32/dotenv';
if (process.env.NODE_ENV === 'production') {
dotenv.config({ path: '.env.production' });
} else {
dotenv.config({ path: '.env.development' });
}这样，在生产环境中，.env.production 文件中的环境变量会被加载到 process.env 对象中，而在开发环境中，.env.development 文件中的环境变量会被加载到 process.env 对象中。
指导意义
在前端开发中，使用环境变量是一个常见的需求。使用 @morgs32/dotenv 可以方便地加载环境变量，从而达到在前端环境中使用环境变量的目的。
同时，使用 @morgs32/dotenv 可以使我们的前端代码更加规范、简洁。也可以降低部署上线的难度，避免因为环境变量导致的错误。
示例代码
以下是一个示例代码，演示了如何使用 @morgs32/dotenv 加载环境变量：
-- -------------------- ---- ------- -- -------- ------ ------ ---- ------------------ ------ ----- ---- -------- ---------------- --------------------------------------- -- - ---------------------- ------------ -- - ------------------- ---
# .env API_URL=https://api.example.com
如果你运行这个示例代码，它会向 https://api.example.com 发送一个 GET 请求，并打印返回的数据。同时，在 .env 文件中，我们指定了 API_URL 环境变量的值为 https://api.example.com。因此，这个示例代码可以正常地获取数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60057c3b81e8991b448ebc31