Vue CLI 通过 NODE_ENV 确定当前是开发还是生产环境
1. NODE_ENV 的作用
NODE_ENV是 Node.js 提供的一个全局环境变量，表示当前的运行环境。- 在 Vue 项目中，Vue CLI 会自动为以下两种命令设置
NODE_ENV：- 开发环境：运行
npm run serve时，NODE_ENV被设置为development。 - 生产环境：运行
npm run build时，NODE_ENV被设置为production。
- 开发环境：运行
通过 NODE_ENV 的值，Vue CLI 能自动加载对应的 .env 文件内容。
2. 加载 .env 文件的逻辑
Vue CLI 会根据以下规则加载环境变量文件：
| 文件名 | 加载时机 |
|---|---|
.env | 所有环境都会加载 |
.env.development | 仅在 NODE_ENV=development 时加载 |
.env.production | 仅在 NODE_ENV=production 时加载 |
.env.test | 仅在 NODE_ENV=test 时加载 |
如果某个变量在多个 .env 文件中都被定义，更具体的环境文件优先级更高，例如：
NODE_ENV=development时，.env.development的变量优先于.env的变量。
3. 如何判断当前环境
你可以通过 process.env.NODE_ENV 来判断当前运行的环境：
示例：打印当前环境
console.log(process.env.NODE_ENV);
- 如果运行
npm run serve，打印结果是：development。 - 如果运行
npm run build，打印结果是：production。
4. 使用 NODE_ENV 判断环境加载不同逻辑
可以在代码中根据 NODE_ENV 的值，执行不同的逻辑。例如：
动态 API 地址配置
const API_URL =
process.env.NODE_ENV === "development"
? "http://localhost:3000"
: "https://api.production.com";
console.log("当前环境是:", process.env.NODE_ENV);
console.log("API 地址是:", API_URL);
5. npm 脚本中如何切换环境
你可以通过设置 NODE_ENV 来切换不同环境。例如：
本地开发环境
npm run serve
这会自动将 NODE_ENV 设置为 development。
生产环境
npm run build
这会自动将 NODE_ENV 设置为 production。
测试环境
需要自定义脚本。例如，在 package.json 中添加以下脚本：
"scripts": {
"test": "NODE_ENV=test vue-cli-service serve"
}
运行以下命令：
npm run test
此时 NODE_ENV 会被设置为 test。
6. 验证加载的环境变量
你可以在代码中验证 process.env 是否正确加载了环境变量：
打印所有加载的环境变量
console.log(process.env);
注意：VUE_APP_ 前缀的变量才会被暴露到客户端，其余的环境变量（如 NODE_ENV）只会用于构建阶段。
7. 总结
- Vue CLI 通过
NODE_ENV确定当前是开发还是生产环境。 - 根据
NODE_ENV值，Vue CLI 会自动加载对应的.env文件。 - 在代码中可以通过
process.env.NODE_ENV动态判断环境，执行不同逻辑。