process-evn介绍

vue项目中，常常能看到process.env字段。比如 vue-element-admin中。axios中有：

const service = axios.create({
    baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
    // withCredentials: true, // send cookies when cross-domain requests
    timeout: 5000 // request timeout
})

那么process.env是什么？

首先， process 对象提供有关当前 Node.js 进程的信息并对其进行控制。它是一个 global （全局变量），提供有关信息，控制当前Node.js 进程。作为一个对象，它对于 Node.js 应用程序始终是可用的。

import process from 'node:process';

因此env 实际上是process对象的属性，该属性返回包含用户环境的对象。需要注意的是，process.env中并不存在NODE_ENV这个东西，NODE_ENV是⼀个⽤户⾃定义的变量，在webpack中它的⽤途是判断⽣产环境或开发环境。我们可以通过设置使得NODE_ENV存在process.env中，一般可以设置自己系统的环境变量，或者在webpack中配置mode，配置文件中设置mode等等

mode（模式）是Vue CLI项目中的一个重要概念，默认情况下它有三种模式：

• development 被 vue-cli-service serve 使用
• test 由 vue-cli-service test:unit 使用
• production 由 vue-cli-service build 和 vue-cli-service test:e2e 使用

例如，NODE_ENV 将在生产模式下设置为 “production”，在测试模式下设置为 “test”，否则默认为 “development”；然后 NODE_ENV 将确定应用程序运行的主要模式-开发、生产或测试-并因此创建什么样的webpack配置。

• 将 NODE_ENV 设置为 “test” 时，Vue CLI会创建一个webpack配置，用于单元测试并对其进行优化，它不处理单元测试不需要的图像和其他资产。
• NODE_ENV=development 创建一个webpack配置，该配置启用HMR，不散列资产或创建供应商包，以便在运行dev服务器时能够快速重新构建。
• 运行 vue cli service build 时，无论要部署到什么环境，都应始终将节点环境设置为“生产”以获取可供部署的应用程序。

系统环境变量中可以添加NODE_ENV，通过增加环境变量名NODE_ENV即可。

注意：如果 NODE_ENV 的环境中有默认值，则它在运行 vue-cli-service 命令时将删除或进行显示设置。

_通过传递–mode选项标志，可以覆盖用于命令的默认模式。_例如，如果要在build命令中使用开发变量：

vue-cli-service serve --mode development
vue-cli-service build --mode development

运行 vue-cli-service 时，将从所有相应的文件加载环境变量，如果它们不包含 NODE_ENV 变量，则会相应地进行设置。

webpack命令设置：

webpack --mode=production

通过 .env 文件或者 .env.[mode] 文件配置。配置过后，运行 Vue CLI 指令（ npm run dev(serve) ，npm run build ）时，就会将该模式下的NODE_ENV载入其中了。而这些命令，都有自己的默认模式： npm run dev(serve) ，其实是运行了 vue-cli-service serve ，默认模式为 development 。可以在 .env.development 文件下修改该模式的 NODE_ENV 。 npm run build ，其实运行了 vue-cli service build ，默认模式为 production 。可以在 .env.production 文件下修改该模式的 NODE_ENV 。即在文件中添加：

NODE_ENV = xxx

代码中设置：

module.exports = {
   mode:'production'
}