dotenv

2023年12月24日

柏拉文

越努力，越幸运

一、认识

---

**dotenv**是一个可以使得Node.js从文件中加载环境变量的库，使用dotenv，我们只需要将程序的环境变量配置写在.env文件中。如果浏览器也需要使用这些环境变量，可以通过webpack.DefinePlugin传递。

二、安装

---

安装dotenv、cross-env依赖

yarn add dotenv cross-env -S

三、配置

---

3.1 package.json

package.json 配置 cross-env 环境变量

{
"scripts": {
    "dev": "cross-env mode=dev webpack server --config ./webpack.config.js",
    "build": "cross-env mode=prod webpack build --config ./webpack.config.js"
},
}

3.2 webpack.config.js dotenv

webpack.config.js 配置 dotenv

• 通过 dotenv 依赖读取项目的 .env 文件，dotenv会自动将.env文件中的环境变量添加到process.env中去。

  const envMode = process.env.mode;
  require("dotenv").config({
  path: Path.resolve(process.cwd(), `./.${envMode}.env`),
  });

• 将Node中的env环境变量传递到浏览器

  • 定义env变量，将Node中的process.env存储起来，这时候可以加一些限定条件，不一定都要存入。比如说必须是VUE_APP开头的等（这里我直接到存入了）。

  const env = {};
  for (const key in process.env) {
      env[key] = JSON.stringify(process.env[key]);
  }
  • 通过webpack.DefinePlugin将env变量传递到浏览器

  new webpack.DefinePlugin({
      "process.env": {
      ...env,
      }
  }),

3.3 webpack.config.js optimization

webpack.config.js 配置 optimization : webpack 会自动读取 webpack.config.js 配置文件中的 mode 给 process.env.NODE_ENV 赋值,如果我们这时候通过 webpack.DefinePlugin 再为 process.env.NODE_ENV 设置值，两者设置的值不一致会导致冲突报错。所以我们需要配置 optimization ,让 webpack 不会自动读取 webpack.config.js 中的 mode 给 process.env.NODE_ENV 赋值

optimization: {
nodeEnv: false,
},

3.4 webpack.config.js 完整配置

const Path = require("path");
const webpack = require("webpack");

const envMode = process.env.mode;
require("dotenv").config({
path: Path.resolve(process.cwd(), `./.${envMode}.env`),
});
const env = {};
for (const key in process.env) {
env[key] = JSON.stringify(process.env[key]);
}

module.exports = {
optimization: {
    nodeEnv: false,
},
plugins: [
    new webpack.DefinePlugin({
    "process.env": {
        ...env,
    },
    }),
],
};

3.5 创建 .env 文件

项目中添加 .env 文件,注意.xxx.env 中的 xxx 必须与 package.json中的 cross-env mode=xxx 一致，否则找不到。

• .dev.env

  NODE_ENV = dev
  BASE_URL = https://dev.com

• .prod.env

  NODE_ENV = prod
  BASE_URL = https://prod.com

四、效果

---

入口文件调用 process.env

console.log(process.env)