vue3环境变量和模式

总结：NODE_ENV是定义环境变量.env，然后通过命令行里的mode决定加载哪个.env文件使用对应NODE_ENV环境变量
例如：npm run test1命令会启动production2环境 使用.env.test2的模式配置

  "scripts": {
    "dev": "vite --mode beta --host",
    "test1": "NODE_ENV=production2 vite --mode test2 --host",
    "develop": "vite build --mode develop",
    "test": "vite build --mode test",
    "online": "vite build --mode online",
    "build": "vite build",
    "build:electron": "vite build --mode electron",
    "build:prod": "pnpm test && pnpm build:electron",
    "preview": "vite preview",
    "prettier": "npx prettier . --write"
  },

.env.test2文件：

# 测试环境
NODE_ENV = "test3" // 但是一般这个值写的是mode的值

# 测试环境
VITE_APP_SERVEICE = 'http://192.168.100.99:1234'

# 测试环境
VITE_APP_PORT = '53021'

– 获取：

console.log('mode模式：main.js里取值', import.meta.env)
console.log('mode模式：vite.config.js里取值', mode)
console.log('环境变量', process.env.NODE_ENV)

---

---

获取环境变量和模式mode值：

console.log('mode模式：main.js里取值', import.meta.env)
console.log('mode模式：vite.config.js里取值', mode)
console.log('环境变量', process.env.NODE_ENV)

一般是使用mode和process.env.NODE_ENV ； 不太使用.env 文件中NODE_ENV（用来知道哪个环境而已）

一、vite文档介绍环境变量

1.环境变量

一定要先阅读一遍环境变量

1.1创建文件

在项目根目录直接创建.env 、.env.beta 、 .env.test 、.env.production；但是有的项目是在env文件下新建这些环境、模式配置

– .env 是公共配置；所有环境默认加载，且会被其他环境的值给覆盖的
– 为了防止意外地将一些环境变量泄漏到客户端，只有以 VITE_ 为前缀的变量 才会暴露 给经过 vite 处理的代码

.env.beta：

2.NODE_ENV 和 模式

NODE_ENV 和 模式是两个东西

根据Vite官网的说明，我来详细解释一下NODE_ENV和**模式(mode)**的区别和使用方法：

🎯 核心概念对比

NODE_ENV是定义环境变量.env，然后通过命令行里的mode决定加载哪个.env文件使用对应NODE_ENV环境变量

概念	定义	作用	默认值
NODE_ENV	Node.js环境变量	控制Node.js运行环境和构建工具的行为，即.env.beta那些文件	由构建工具自动设置
模式(mode)	Vite特有的环境标识	通过package.json.json里的命令 --mode mode值 决定加载哪个 Node.js环境变量，区分不同部署环境	由命令行参数指定

🔧 具体区别详解

1. NODE_ENV (Node.js Environment)

• 本质：Node.js的系统环境变量
• 主要用途：
  • 告诉构建工具（Vite、Webpack等）当前是开发还是生产环境
  • 影响构建优化策略
  • 控制依赖包的行为

2. 模式 (Mode)

• 本质：Vite自定义的环境标识
• 主要用途：
  • 决定加载哪个.env文件（如.env.development, .env.production）
  • 区分不同的部署环境（开发、测试、预生产、生产等）
  • 通过import.meta.env.MODE在代码中访问到命令行里的mode值

💻 实际使用示例

命令行使用方式

# 默认构建（NODE_ENV=production, mode=production）
vite build

# 指定模式为development（NODE_ENV=production, mode=development）
vite build --mode development

# 手动设置NODE_ENV（NODE_ENV=development, mode=production）
NODE_ENV=development vite build

# 同时设置（NODE_ENV=development, mode=development）
NODE_ENV=development vite build --mode development

环境变量文件配置

# .env.development
VITE_API_BASE_URL=http://localhost:3000/api
VITE_APP_TITLE=开发环境

# .env.production  
VITE_API_BASE_URL=https://api.example.com
VITE_APP_TITLE=生产环境

# .env.staging
VITE_API_BASE_URL=https://staging-api.example.com
VITE_APP_TITLE=预发布环境

在代码中访问环境变量

// 访问模式
console.log(import.meta.env.MODE) // 'development', 'production', 'staging'

// 访问自定义环境变量（必须以VITE_开头）
console.log(import.meta.env.VITE_API_BASE_URL)

// 判断环境
if (import.meta.env.DEV) {
  // 开发环境逻辑
  console.log('当前是开发环境')
}

if (import.meta.env.PROD) {
  // 生产环境逻辑
  console.log('当前是生产环境')
}

Vite配置中使用

// vite.config.js
export default ({ mode }) => {
  // mode 来自 --mode 参数
  // process.env.NODE_ENV 由Vite自动设置
  
  return {
    define: {
      // 在构建时替换的环境变量
      __APP_ENV__: JSON.stringify(process.env.NODE_ENV)
    },
    build: {
      // 根据NODE_ENV进行不同优化
      minify: process.env.NODE_ENV === 'production'
    }
  }
}

🚀 实际项目中的应用场景

多环境部署配置

# 开发环境
vite build --mode development

# 测试环境  
vite build --mode testing

# 预发布环境
vite build --mode staging

# 生产环境
vite build --mode production

Jenkins流水线配置

#!/bin/bash
# 根据分支选择模式
if [ "$BRANCH" = "develop" ]; then
  MODE="development"
elif [ "$BRANCH" = "staging" ]; then
  MODE="staging" 
else
  MODE="production"
fi

vite build --mode $MODE

⚠️ 重要注意事项

1. 环境变量命名：只有以VITE_开头的变量才会被暴露给客户端代码
2. 敏感信息：不要在客户端代码中暴露敏感信息（如API密钥）
3. 构建优化：NODE_ENV=production时会启用代码压缩、tree-shaking等优化
4. 模式优先级：命令行指定的模式会覆盖默认模式

📝 总结

• NODE_ENV：底层环境标识，主要影响构建工具行为
• 模式：业务层环境标识，主要用于加载不同的环境配置
• 两者可以独立设置，为多环境部署提供了极大的灵活性

在你的Jenkins部署场景中，可以根据不同分支或部署目标使用不同的模式，实现环境配置的灵活管理。

---

2.1process.env.NODE_ENV（Node.js 环境变量）

– 作用：控制开发工具、调试信息和打包优化的启用或关闭。
NODE_ENV 是 Node.js 中的环境变量，用于定义当前的运行环境，常见的取值包括：

• development：用于开发环境。这时，Vite 会启动一个本地开发服务器，并启用热更新等开发工具。
• production：用于生产环境。这时，Vite 会执行项目的生产构建，生成优化后的静态文件。
• test：用于测试环境，通常在运行测试框架时使用。

– 在 Vue 3 中，NODE_ENV 由 Vite 自动设置：

启动开发服务器（vite 或 npm run dev）时，NODE_ENV 被设为 development。
进行生产构建（vite build 或 npm run build）时，NODE_ENV 被设为 production。
不要在 .env 文件中设置 NODE_ENV 为非标准值（如 beta）
通常有以下几个标准值：develop、production、test

– 获取：

console.log('环境变量', process.env.NODE_ENV)

– NODE_ENV 是 Node.js 中的环境变量，通常有以下几个标准值：

2.2 模式（mode）

– 作用：

1.Vite 会根据启动或打包的 mode 的值 ** 加载对应的 .env.[mode] 文件 **
2.定制化项目配置：不同模式下，可以根据不同的需求配置不同的环境变量，如只线上模式使用某些依赖插件、 API 地址、第三方服务的密钥等。
3.一般创建多个模式管理变量，例如：.env.beta 、 .env.develop 、 .env.test 、.env.production

4.在package.json中定义用于管理和运行项目的脚本命令：

例如：npm run test1命令会启动production2环境 使用.env.test2的模式配置

  "scripts": {
    "dev": "vite --mode beta --host",
    "test1": "NODE_ENV=production2 vite --mode test2 --host",
    "develop": "vite build --mode develop",
    "test": "vite build --mode test",
    "online": "vite build --mode online",
    "build": "vite build",
    "build:electron": "vite build --mode electron",
    "build:prod": "pnpm test && pnpm build:electron",
    "preview": "vite preview",
    "prettier": "npx prettier . --write"
  },

.env.test2文件：

# 测试环境
NODE_ENV = "test3" // 但是一般这个值写的是mode的值

# 测试环境
VITE_APP_SERVEICE = 'http://192.168.100.99:1234'

# 测试环境
VITE_APP_PORT = '53021'

– 获取：

console.log('mode模式：main.js里取值', import.meta.env)
console.log('mode模式：vite.config.js里取值', mode)
console.log('环境变量', process.env.NODE_ENV)

– 总结：

二、loadEnv获取环境变量（针对在env文件夹下）

正常情况下在项目根目录直接创建.env.beta 、 .env.test 、.env.production；获取值就是使用 console.log('环境变量', process.env.NODE_ENV)

.
.
但是有的项目是在env文件下新建这三个模式配置

Vite 默认是不加载 .env 文件的，因为这些文件需要在执行完 Vite 配置后才能确定加载哪一个，举个例子，root 和 envDir 选项会影响加载行为。不过当你的确需要时，你可以使用 Vite 导出的 loadEnv 函数来加载指定的 .env 文件。

在 Vite 中，使用 loadEnv 函数可以方便地加载指定模式下的环境变量文件（如 .env.beta、.env.production 等）。以下是如何使用 loadEnv 的步骤：

2.1创建环境变量文件

确保你的项目根目录下有相应的 .env 文件，例如：

• .env
• .env.beta
• .env.production

这些文件可以包含键值对的环境变量，例如：

# .env.beta
VITE_API_URL=https://beta.api.example.com
VITE_OTHER_CONFIG=some_value

2. 使用 loadEnv 加载环境变量

在 Vite 的配置文件中（通常是 vite.config.js 或 vite.config.ts），可以使用 loadEnv 来加载环境变量。

示例代码：

import { loadEnv, defineConfig } from "vite";

export default defineConfig(({ mode }) => {
  // 加载对应模式的环境变量
  const env = loadEnv(mode, process.cwd());

  console.log(env); // 打印当前加载的环境变量

  return {
    // Vite 配置
    define: {
      'process.env': env, // 可选：将环境变量挂载到 process.env
    },
  };
});

3. 访问环境变量

在应用代码中，可以通过 import.meta.env 访问加载的环境变量。例如：

console.log(import.meta.env.VITE_API_URL); // 输出对应环境的 API URL

三、process.env.NODE_ENV 和 .env 文件中配置的 NODE_ENV 的区别和联系

一般是使用mode和process.env.NODE_ENV ； 不太使用.env 文件中NODE_ENV（用来知道哪个环境而已）