#关于process.env.NODE_ENV 与 import.meta.env 相关了解

process.env.NODE_ENV 在前端 Vue 项目中非常重要，但它其实是个“假象”，在前端它并不是原生就有的变量。下面我从多个角度来给你通俗讲明白它的由来和使用方式 👇

🌐 一、process.env.NODE_ENV 是干嘛用的？

这是 一个环境变量，用于区分你的项目当前运行在什么模式下，比如：

🧱 二、process 是哪里来的？浏览器有它吗？

❌ 浏览器中是 没有 process 对象 的！
process.env.NODE_ENV 是 Node.js 中的变量，前端之所以能用，是因为构建工具（比如 Vite / Webpack）在打包时自动替换了它。

✅ 所以：

process.env.NODE_ENV 是构建工具 在构建阶段 替换进去的一个“静态值”，不是浏览器里真的能访问的对象。

🛠️ 三、Vue 项目中怎么使用它？

✅ 使用方式（Vite、Webpack 都支持）：

if (process.env.NODE_ENV === 'development') {
  console.log("开发模式：可以开启调试功能");
} else {
  console.log("生产模式：关闭调试功能");
}

⚠️ 这段代码在打包时会被“静态替换”成：

if ('production' === 'development') { ... } // 构建产物中就是字符串

🔧 四、它从哪里设置的？怎么指定值？

🧩 方式一：启动脚本中指定（推荐）

你的 package.json 中可能这样写：

"scripts": {
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview"
}

🔁 实际运行时：

• vite 默认会把 NODE_ENV 设置为 development
• vite build 默认设置为 production

🧩 方式二：手动设置（适用于高级用法）

NODE_ENV=test vite

或者在 Windows：

set NODE_ENV=test && vite

🧬 五、Vite / Vue 项目中，还有哪些环境变量？

Vite 支持你在项目根目录放 .env 文件来定义自定义变量：

# .env.development
VITE_API_BASE=http://localhost:3000

# .env.production
VITE_API_BASE=https://api.example.com

然后在代码中用：

console.log(import.meta.env.VITE_API_BASE)

> ✅ import.meta.env 是 Vite 的新写法，推荐用它来替代 process.env！

🔁 总结一下（举一反三）：

🚨 一、直接使用 process.env.NODE_ENV 的问题

在 前端 JS（特别是 Vue 项目）中直接使用 process.env.NODE_ENV 爆红，通常是这两种情况导致的：

🔥 爆红的原因：

1. 构建工具不支持 process.env：
   比如你用的是 Vite，它不再推荐使用 process.env.NODE_ENV，而是推荐用：

   import.meta.env.MODE
   

2. TypeScript 或 ESLint 报错：
   如果你用的是 TypeScript 或 ESLint，它默认不知道 process.env.NODE_ENV 存在，除非你手动声明（不推荐这么做）。

✅ 正确写法（基于构建工具）

🔹 如果你用的是 Vite（Vue 3 默认）：

🔄 ✅ 替换为：

if (import.meta.env.MODE === 'development') {
  console.log('开发模式');
}

或者你在 .env.development 中设置了：

VITE_DEBUG=true

就可以用：

if (import.meta.env.VITE_DEBUG === 'true') {
  console.log('调试中...');
}

🔹 如果你用的是 Webpack（Vue 2 项目常见）：

可以使用：

if (process.env.NODE_ENV === 'development') {
  console.log('开发模式');
}

但要注意两件事：

1. 确保 Webpack 的 DefinePlugin 正确配置了环境变量：

plugins: [
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
  })
]

2. Vite 没有 process 对象！ 所以 不要在 Vite 项目中用它！

🛠️ 如何修复你的“爆红”问题？

🎯 你应该用的是 Vite + Vue 3 项目

那你改成下面这样写就对了：

if (import.meta.env.MODE === 'development') {
  console.log('当前是开发环境');
} else {
  console.log('当前是生产环境');
}

📦 补充：Vite 中常见的环境变量有这些：

🧪 举一反三：

你想根据环境加载不同的 API 地址？

const baseURL = import.meta.env.MODE === 'development'
  ? 'http://localhost:3000'
  : 'https://api.xxx.com';

你想开启某个调试组件？

if (import.meta.env.VITE_SHOW_DEBUG_PANEL === 'true') {
  // 显示调试工具
}

在 Vue 项目中（特别是 Vite 构建的项目），自定义环境变量配置 是前后端开发中常见的需求，比如你想配置：

• API 地址
• 是否开启调试模式
• 第三方服务的密钥等

✅ 一步一步：自定义 & 读取环境变量

🧩 第一步：在项目根目录新建 .env 文件

你可以创建多个环境配置文件，对应不同模式：

📦 示例 .env.development 文件

# 注意：变量名必须以 VITE_ 开头
VITE_API_URL=http://localhost:3000/api
VITE_DEBUG=true
VITE_TITLE=🌟莉莉的前端实验室

🧑‍💻 第二步：在代码中读取这些变量

你在 Vue 项目中，可以直接这样写：

console.log(import.meta.env.VITE_API_URL);   // 输出 http://localhost:3000/api
console.log(import.meta.env.VITE_DEBUG);     // 输出 "true"
console.log(import.meta.env.VITE_TITLE);     // 输出 🌟莉莉的前端实验室

⚠️ 注意：所有自定义变量名必须以 VITE_ 开头，否则不会被暴露到客户端！

🔧 第三步：使用变量控制程序行为（举例）

const apiBase = import.meta.env.VITE_API_URL;

if (import.meta.env.VITE_DEBUG === 'true') {
  console.log("🔍 进入调试模式！");
}

🔐 补充：Vite 是怎么加载这些变量的？

• Vite 会在构建时将 .env.* 文件中的变量解析成 import.meta.env 对象注入代码中。
• 编译后这些变量是静态值（不是运行时的 process.env）。

📌 举一反三场景建议

🛠️ 常见坑提醒

1. .env 文件不能加双引号，值会当字符串读，无需包裹：

   ❌ VITE_DEBUG="true"
   ✅ VITE_DEBUG=true
   

2. 使用布尔值时，读取出来都是字符串：

   if (import.meta.env.VITE_DEBUG === 'true') // 正确！
   

3. 修改 .env 文件后，需要 重启开发服务器：

   npm run dev
   

import.meta 对象的来源：

一般我们写的是：

import xxx from 'xxx'

那 import.meta.xxx 是什么？为什么 import 后面可以接 .meta 呢？

✅ 简短回答：

import.meta

不是你平时用的 import 语句，它是ES模块系统中提供的一个特殊对象，叫做 👉 Import Meta Object。这个是 语言级别（ES规范）原生支持的东西，不是语法糖、不是函数调用，也不是你能 import 出来的变量。

🔍 详细解析（建议收藏✨）

🧩 import 语句 vs import.meta：

📘 语法对比：

// 这是导入模块：
import axios from "axios";

// 这是访问当前模块元信息（不是导入！）
console.log(import.meta);

📦 import.meta 是什么？

根据 ECMAScript Module 规范：

import.meta 是 一个由 JS 引擎自动注入的对象，包含当前模块运行环境的元数据。

不同平台对它可以扩展内容：

• 浏览器原生提供的 import.meta.url 表示当前模块的路径。
• 构建工具如 Vite、Rollup、Webpack 可以扩展添加：
  • import.meta.env（环境变量）
  • import.meta.hot（热更新）
  • import.meta.glob（动态导入多个文件）

📌 一个对比说明更直观：

🧠 举一反三（怎么用）

💡 例子 1：获取当前模块路径（浏览器）

console.log(import.meta.url); 
// 输出：file:///home/user/project/main.js

💡 例子 2：环境变量（Vite 专属）

if (import.meta.env.MODE === "development") {
  console.log("正在开发环境下运行！");
}

🧪 ⚠️ 注意事项：

• import.meta 只能在 ES模块 中使用（.mjs 或通过模块化构建工具如 Vite/Webpack）。
• 不能在 CommonJS (require) 模块中用。
• import.meta 是一个对象，不是函数，不能写成 import.meta() ❌。

✅ 总结一句话：

import.meta 是 ES 模块原生提供的“当前模块元信息对象”，不是 import 的内容，而是由浏览器或打包工具提供“扩展能力”的入口，像 import.meta.env 就是 Vite 提供的构建时环境变量注入方式。