Skip to main content

环境变量

开发环境与生产环境区分​

process.env.NODE_ENV 应该是我们最熟悉的环境变量了，它经常出现在使用框架或者类库的时候，被用来区分不同的环境（开发，测试，生产等），以便我们进行相对应的项目配置，比如是否开启 sourceMap，api 地址切换等。那为什么 process.env.NODE_ENV 能用来区分环境呢？它是如何来的？

到底怎么做​

process 对象是一个 global （全局变量），提供有关信息，控制当前 Node.js 进程。作为一个对象，它对于 Node.js 应用程序始终是可用的，故无需使用 require()。

process.env

process.env 属性返回一个包含用户环境信息的对象。 在 node 环境中，当我们打印 process.env 时，发现它并没有 NODE_ENV 这一个属性。实际上，process.env.NODE_ENV是在 package.json 的 scripts 命令中注入的，也就是 NODE_ENV 并不是 node 自带的，而是由用户定义的，至于为什么叫 NODE_ENV，应该是约定成俗的吧。

{
  "scripts": {
    "dev": "NODE_ENV=development webpack --config webpack.dev.config.js"
  }
}

可以看到 NODE_ENV 被赋值为 development，当执行 npm run dev 时，我们就可以在 webpack.dev.config.js 脚本中以及它所引入的脚本中访问到 process.env.NODE_ENV，而无法在其它脚本中访问。

如何在其他脚本中访问​

前面提到，在 scripts 命令中注入的 NODE_ENV 只能被 webpack 的构建脚本访问，而被 webpack 打包的源码中是无法访问到的，此时可以借助 webpack 的 DefinePlugin 插件，创建全局变量

const webpack = require("webpack");
module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": '"development"',
    }),
  ],
};

跨平台的 cross-env​

在 window 平台下直接设置 NODE_ENV =XXX 是会报错的，cross-env 能够提供一个设置环境变量的 scripts，这样我们就能够以 unix 方式设置环境变量，然后在 windows 上也能够兼容。

npm install cross-env --save

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server"
}

使用.env 文件​

如果需要配置的环境变量太多，全部设置在 scripts 命令中既不美观也不容易维护，此时将环境变量配置在.env 文件中，然后使用 dotenv 插件来加载.env 配置文件。

只是起到隔离作用

npm install dotenv --save

创建.env

NODE_ENV = development
# 这是注释
API_URL = https://abc.com

其他在 webpack 的配置可见 https://github.com/motdotla/dotenv#readme

我们在这里隔离不同环境

├── env
   ├── .env.dev
   ├── .env.test
   ├── .env.pre
   └── .env.prd
├── webpack.config.js

使用​

加载之后能自动注入到 webpack 打包文件中

# dev
cross-env NODE_ENV=dev

# test
cross-env NODE_ENV=test

# pre
cross-env NODE_ENV=pre

# prd
cross-env NODE_ENV=prd

Vue cli 也可以加载.env 文件，详情可查看：Vue cli-环境变量和模式 https://cli.vuejs.org/zh/guide/mode-and-env.html#%E6%A8%A1%E5%BC%8F

https://juejin.cn/post/7070347341282148365