在软件开发中，环境变量是用于区分代码运行环境的重要工具。不同的环境变量配置可以帮助开发者在不同的运行环境中调整应用程序的行为。本文将详细解释环境变量的概念、模式以及如何在项目中配置和使用它们。
环境与模式
环境
环境通常指的是代码运行的具体场景，常见的环境包括：
- 本地环境（Local Environment）：代码运行在开发者的本地机器上，通常用于开发和调试。
- 测试环境（Test Environment）：代码运行在测试服务器上，用于功能测试和集成测试。
- 预发布环境（Staging Environment）：代码运行在接近生产环境的服务器上，用于最后的验证和测试。
- 生产环境（Production Environment）：代码运行在正式服务器上，面向最终用户。
不同的环境可能需要不同的配置，例如数据库连接、API 地址、日志级别等。
模式
模式则指的是代码运行的方式，常见的模式包括：
- 开发模式（Development Mode）：代码在开发模式下运行，通常启用了调试工具、热更新、详细的日志输出等，便于开发者调试和开发。
- 生产模式（Production Mode）：代码在生产模式下运行，通常启用了代码压缩、缓存、性能优化等，以提高应用程序的性能和安全性。
注意，生产模式，不是指代码运行在生产环境，而是指代码运行在生产模式下。 同样，开发模式，也不是指代码运行在开发环境，而是指代码运行在开发模式下。
大白话就是，环境是代码运行的地方，模式是代码运行的方式。 在任何环境下，都可以运行在开发模式或生产模式。生产模式，更多粗鄙的理解为打包模式，开发模式，更多粗鄙的理解为调试模式。
打个比方，环境就是你在哪里吃饭，模式就是你怎么吃饭。常用的环境是家里、公司。模式是手抓饭吃、用筷子吃。理论上，你可以在家里用手抓饭吃，也可以用筷子吃；在公司用手抓饭吃，也可以用筷子吃。但是，一般情况下，你在家里吃饭，用手抓饭吃；在公司吃饭，用筷子吃。
NODE_ENV 环境变量
NODE_ENV 是 Node.js 应用程序中常用的模式变量。常见的值包括：
development：表示开发模式，通常用于本地开发环境，但理论上可以用于任意环境。production：表示生产模式，通常用于生产环境，但理论上可以用于任意环境。
NODE_ENV 的值会影响应用程序的行为。例如，在 production 模式下，应用程序可能会启用代码压缩、缓存等优化措施；而在 development 模式下，应用程序可能会启用调试工具和详细的日志输出。
需要注意的是，NODE_ENV 的值并不直接对应具体的环境（如测试环境、预发布环境等），而是对应代码的运行模式。
环境配置文件
在项目中，通常使用 .env 文件来配置不同环境的环境变量。常见的 .env 文件包括：
.env：默认的环境变量配置。.env.local：本地开发环境的配置。.env.test1：测试环境 1 的配置。.env.test2：测试环境 2 的配置。.env.stage：预发布环境的配置。.env.prod：生产环境的配置。
这些文件可以根据不同的环境需求，配置不同的全局变量。
在 package.json 中配置环境变量
在 package.json 文件中，可以通过 scripts 字段配置不同环境的启动和打包命令。例如：
{
"scripts": {
// 开发模式 这里的mode我觉得更好理解为环境参数
"dev:local": "vite --mode local",
"dev:test1": "vite --mode test1",
"dev:test2": "vite --mode test2",
"dev:stage": "vite --mode stage",
"dev:prod": "vite --mode prod",
// 打包模式 一般不打包本地环境
"build:test1": "vite build --mode test1",
"build:test2": "vite build --mode test2",
"build:stage": "vite build --mode stage",
"build:prod": "vite build --mode prod"
}
}
这样，可以通过不同的命令启动不同的环境，方便开发和部署。比如我想在开发模式下启动正式环境，可以使用 npm run dev:prod 命令。这样很容易在本地开发时，调用线上接口，排查线上问题。
注意不要轻易设置 NODE_ENV 的值，默认dev命令就是development，build命令就是production。
很多项目的.local文件是被忽略的，所以可以将local重命名，保持统一就可以。
使用环境变量
不同的编译器和框架，使用环境变量的方式可能有所不同。在 Vite 中，可以通过 import.meta.env 获取环境变量。例如：
// src/utils/request.ts
import axios from 'axios'
const request = axios.create({
baseURL: import.meta.env.VITE_BASE_URL as string,
timeout: 10000,
})
这样，就可以根据不同的环境配置，动态获取接口地址。
