Vue 项目中的 process is not defined 错误解决指南

问题描述

在 Vue + TypeScript 项目中使用 process.env.var_name 来判断开发模式或生产模式时，会出现 Uncaught ReferenceError: process is not defined 错误。这是因为在使用 Vite 构建工具的项目中，process.env 已被移除，需要采用新的环境变量访问方式。

解决方案

方案一：使用 import.meta.env（推荐）

Vite 使用 import.meta.env 来替代传统的 process.env：

// 替换前
const isProduct = process.env.APP_ENV === "prod";

// 替换后
const isProduct = import.meta.env.VITE_APP_ENV === "prod";

环境变量命名规则

在 Vite 中，只有以 VITE_ 开头的环境变量才会被暴露给客户端代码：

# .env 文件示例
VITE_APP_ENV=prod
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=我的应用

方案二：检查运行环境

Vite 提供了内置的环境检测变量：

// 判断是否生产环境
if (import.meta.env.PROD) {
  // 生产环境逻辑
}

// 判断是否开发环境
if (import.meta.env.DEV) {
  // 开发环境逻辑
}

方案三：在 vite.config.js 中配置 process.env

如果需要兼容旧代码，可以在 Vite 配置中手动定义 process.env：

// vite.config.js
import { defineConfig, loadEnv } from "vite";
import vue from "@vitejs/plugin-vue";

export default ({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");
  return defineConfig({
    define: {
      "process.env": env,
    },
    plugins: [vue()],
    // 其他配置...
  });
};

注意

这种方法虽然能解决问题，但不是 Vite 推荐的最佳实践，可能会导致一些意外行为。

方案四：临时解决方案（不推荐）

在极少数情况下，如果只需要在特定组件中临时解决此问题：

mounted() {
  window.process = {
    env: {
      NODE_ENV: import.meta.env.MODE
    }
  };
}

不推荐使用

这种方法只是临时修补，不能解决根本问题，且可能导致其他兼容性问题。

实际应用示例

API 调用示例

// 使用 import.meta.env 访问 API 地址
const { data } = await axios.post(
  `${import.meta.env.VITE_API_URL}/register`,
  {
    name,
    email,
    password,
  }
);

环境变量配置示例

// .env.development
VITE_API_URL=http://localhost:8000/api
VITE_APP_ENV=dev

// .env.production
VITE_API_URL=https://api.example.com/api
VITE_APP_ENV=prod

常见问题

1. 环境变量未生效？

确保：

• 变量名以 VITE_ 开头
• 重新启动开发服务器（修改 .env 文件后需要重启）
• 检查 .env 文件位置（应位于项目根目录）

2. 如何区分不同环境？

Vite 支持多环境配置：

• .env # 所有环境
• .env.development # 开发环境
• .env.production # 生产环境

总结

Vite 使用 import.meta.env 替代了传统的 process.env 来访问环境变量，这是现代前端构建工具的改进。推荐使用标准的 import.meta.env.VITE_* 方式，它不仅更安全（只有明确前缀的变量会被暴露），而且与 Vite 的构建系统完美集成。

遵循这些最佳实践，你可以轻松地在 Vue + Vite 项目中管理环境变量，避免 process is not defined 错误。