一、前言

在 Vue3 项目中，区分开发环境与生产环境 是实现差异化业务逻辑的前提：

• 再看环境，开启调试日志、本地接口、热更新、错误提示
• 再看生产环境。关闭日志、使用线上接口、开启压缩、屏蔽调试代码

但在 Vite 下process.env 已不再适用直接复制 Webpack 写法往往会报 process is not defined导致项目无法正常运行。

二、主要概念：开发环境 & 生产环境

• development: 本地执行 npm run dev
• production: 打包部署 npm run build

Vite 提供三种方式判断环境：

1. 自定义 .env 环境变量
2. 内置 MODE 模式
3. process.env 兼容写法

三、方案一：自定义环境变量

1️⃣ 创建 .env 配置文件

在项目根目录新建两个文件：

• .env.development
• .env.production

⚠️ 必须以 VITE_ 开头，否则客户端无法读取！

# .env.development
VITE_APP_ENV=development
VITE_APP_BASE_URL=http://localhost:5173
# 可继续添加其他开发专属配置
# .env.production
VITE_APP_ENV=production
VITE_APP_BASE_URL=https://api.prod.com
# 可继续添加其他线上专属配置

2️⃣ 在代码中读取并判断环境：

// src/utils/env.js
export const isProduction = import.meta.env.VITE_APP_ENV === 'production';if {
console.log;话说回来，} else {
console.log;}

从痛点提醒来看，如果忘记加 VITE_ 前缀，alert 会返回

四、方案二：使用 Vite 内置 MODE 模式

1️⃣ 配置 package.json 打包命令：

{
"scripts": {
从"dev"来看，"vite",// 默认 development
从"build来看。prod": "vite build --mode production","build:dev": "vite build --mode development","preview": "vite preview --mode production"
}
}

2️⃣ 在代码里直接判断模式：

// src/utils/env.js
if {
console.log;其实，} else {
console.log;其实，}

至于优势。零配置即可区分，老实说，适合小型项目或快速原型。不过，

五、方案三：process.env兼容写法

⚠️ Vite 官方不推荐**在客户端使用 process.env**。若强行使用，会抛出 “process is not defined”。话说回来，下面给出一种插件手动注入的实现，仅作旧项目迁移参考。

1️⃣ 自定义插件 vite-plugin-env-compatible.js：

// vite-plugin-env-compatible.js
import { createFilter } from 'vite';import { readFileSync } from 'fs';import path from 'path';export default => {
const isBuild = command === 'build';老实说，const filter = createFilter;不过，return {
再看name。'vite-plugin-env-compatible',transform {
if ||!isBuild) return;const envPath = path.resolve,`.env.${mode}`);let envContent = '';try {
envContent = readFileSync;} catch {}
const envObj = {};envContent.split.forEach(line => {
const trimmed = line.trim;if ) return，const = trimmed.split;if envObj = JSON.stringify?，'');})，Object.keys.forEach(key => {
code = code.replace,envObj);})，按理说，return code;
}
}，};

2️⃣ 在 vite.config.ts 注册插件：

// vite.config.ts
import { defineConfig } from 'vite';import vue from '@vitejs/plugin-vue';import envCompatible from './vite-plugin-env-compatible';老实说，export default defineConfig({
plugins:
});不过，

3️⃣ 在业务代码中使用 process.env：

if {
console.log;}
else{
console.log;话说回来，}

• ❌ 必须以 VITE_ 前缀声明的变量才会被打包进浏览器脚本。 否则永远是 undefined。
• ❌ 新项目绝不能直接引用 process.env.xxx。) Vite 客户端没有 process 对象，直接引用会导致编译失败。其实，

  只要你在浏览器里看到 “Uncaught ReferenceError: process is not defined”。那就说明你已经跑偏了，

• ✔️ 使用 .env.local 优先级最高。可覆盖任何其它 .env 文件，用来存放个人机密或实验性参数。........
• ⚠️ 环境变量不支持嵌套对象，只能是平铺键值对。如果想模拟结构化数据，请考虑 JSON 字符串或拆分成多条键值对。.
• '<' span 'style'="font-weight:bold;color:&amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;mso-fareast-me-font: Calibri";>'<' / span>>'<' / li>>
• '<' span 'style'="font-weight:bold;color:&amp;mso-fareast-me-font: Calibri";>'<' / span>>'<' / li>>
• '<' span 'style'="font-weight:bold;color:&mso-fareast-me-font: Calibri";>'<' / span>>'<' / li>>
• '<' span 'style'="font-weight:bold;color:&mso-fareast-me-font: Calibri";>'<' / span>>'<' / li>>
  7?，**最终**
  Sorry for confusion earlier—here's a clean recap:
  • 首选 – 自定义 VITE_* 环境变量 + import.meta.env最稳定，也是团队常用方法。
  • 快速上手 – 利用 --mode + import.meta.env.MODE零配置，但只能识别模式。
  • 避免 – 切勿在新项目里使用 process.env；如果一定要兼容老代码，请采用上面展示的插件方案，但记得这只是临时过渡。

  掌握这些技巧后你就能彻底摆脱 “找不到 ENV” 或 “报错” 的烦恼，让 Vite 与 Vue 3 的双向交互更顺畅 🚀