在前端开发中，我们常常会需要为不同的环境配置不同的参数。例如开发环境、测试环境和生产环境的接口地址可能不同。为了避免手动修改代码中的参数，我们可以使用 webpack-dotenv-plugin 这个 npm 包来统一管理这些参数，让不同的环境自动加载对应的参数配置文件。
安装
首先，我们需要在项目中安装 webpack-dotenv-plugin 包。可以通过 npm 命令进行安装。
npm install webpack-dotenv-plugin --save-dev
配置
接下来，我们需要在 webpack 配置文件中进行一些配置。
创建配置文件
在项目根目录下创建以下三个配置文件。
.env.env.development.env.production
这三个文件中分别存放不同环境下的参数配置。
.env 文件中存放的是所有环境通用的参数。
# .env API_BASE_URL=http://example.com/api/
.env.development 文件中存放的是开发环境下的参数配置。
# .env.development NODE_ENV=development
.env.production 文件中存放的是生产环境下的参数配置。
# .env.production NODE_ENV=production API_BASE_URL=http://prod.example.com/api/
修改 webpack 配置文件
在 webpack 配置文件中添加以下代码。
-- -------------------- ---- -------
----- ------------ - ---------------------------------
-------------- - -
-- --- ------
-------- -
--- --------------
----- ------------------------------ -- ---------------
--
-
--这里使用了 DotenvPlugin 插件来加载不同的参数配置文件。通过 path 属性指定当前环境对应的配置文件路径。若未指定环境则默认为 development 环境。
使用
在代码中，我们可以直接调用配置文件中的参数。
例如，在 Vue.js 项目中，可以使用如下代码获取 API_BASE_URL 参数。
this.$http.get(`${process.env.API_BASE_URL}/user`)这里 $http 是使用 Vue.js 插件 vue-resource 提供的请求方法。
总结
使用 webpack-dotenv-plugin 可以方便地管理不同环境下的参数配置，避免手动修改代码中的参数。同时，也有助于减少参数配置文件的重复性代码。建议在前端项目开发中使用该插件来提高生产效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671038dd3466f61ffdc5e