配置环境变量

在Nodejs环境中，配置环境变量的方法有很多种方式

windows系统下的set NODE_ENV=development
使用cross-env 设置 crose-env NODE_ENV=development
使用dovenv设置

webpack命令行工具中有一个参数--node-env可以支持给当前系统环境指定NODE_ENV的值

1. dotenv设置环境变量

bash

pnpm add dotenv -D

1）新建env文件

.env ：存放公共变量
.env.development：存放开发环境的变量
.env.production：存放生产环境的变量

示例：

shell

# .env
BASE_URL=/
HELLO=webpack

2）配置npm脚本

json

"scripts":{
    "dev":"webpack serve -c build/webpack.dev.js --node-env development",
    "build":"webpack -c build/webpack.prod.js --node-env production",
}

重点在于--node-env 指定NODE_ENV变量的值，便于后续根据它读取.env.xxxx文件

3）读取env变量

// build/utils.js
function setEnv() {
  const namespace = process.env.NODE_ENV;
  const { parsed } = require("dotenv").config({
    path: [".env", `.env.${namespace}`],
  });
  return parsed ;
}

module.exports = {
    setEnv
}

在webpack.base.js顶部引入上述放方法即可，这样环境变量就设置完毕了，webpack配置文件内可以通过process.env.xxxx访问

2. 将环境变量定义为全局变量

业务中可能需要用到某个环境变量，但是环境变量是定义到node环境中的，因此就需要通过DefinePlugin来将其定义到浏览器全局变量中

const webpack = require("webpack");
const ENV = setEnv(); // 设置环境变量
module.exports = {
  // ....
  plugins: [
    new webpack.DefinePlugin({
      __VUE_OPTIONS_API__: true, // 开启options api 解除控制台警告
      __VUE_PROD_DEVTOOLS__: false, // 生产环境不启用devtools 解除控制台警告
      __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: false, // 禁用生产中水合不匹配的详细警告
      BASE_URL: ENV.BASE_URL // 设置基础路径
    }),
  ]
  // ....
};

至此，环境变量就设置完毕了

配置环境变量 ​

1. dotenv设置环境变量 ​

1）新建env文件 ​

2）配置npm脚本 ​