升级Vite至3.1.0后出现process未定义错误，求解决方案

我有一个React/TypeScript应用，在升级Vite到3.1.0版本前，使用以下代码通过process.env.NODE_ENV判断开发或生产环境，从而获取对应API地址：

function getEnvironment(): "production" | "development" {
  if (process.env.NODE_ENV === "production") {
    return "production";
  }
  return "development";
}

type EnvUrl = { development: string; production: string };

const API_URL: EnvUrl = {
  development: "http://localhost:5173/api/endpoint",
  production: "https://ingress-url/api/endpoint",
};

export const apiUrl = API_URL[getEnvironment()];

但升级Vite到3.1.0后，生产构建运行时出现错误：Uncaught ReferenceError: process is not defined。我的Vite配置如下：

import react from "@vitejs/plugin-react";
import { resolve } from "path";
import { rollupImportMapPlugin } from "rollup-plugin-import-map";
import { terser } from "rollup-plugin-terser";
import { ConfigEnv } from "vite";
import viteCompression from "vite-plugin-compression";
import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
import { viteMockServe } from "vite-plugin-mock";
import { UserConfigExport } from "vitest/config";

const reactUrl = "my-cdn-url/react/18/esm/index.js";
const reactDomUrl = "my-cdn-url/react-dom/18/esm/index.js";

const imports = {
  react: reactUrl,
  "react-dom": reactDomUrl,
};

export default ({ command }: ConfigEnv): UserConfigExport => ({
  plugins: [
    react(),
    terser(),
    cssInjectedByJsPlugin(),
    viteCompression({
      algorithm: "gzip",
    }),
    viteCompression({
      algorithm: "brotliCompress",
    }),
    viteMockServe({
      mockPath: "mock",
      localEnabled: command === "serve",
    }),
    {
      ...rollupImportMapPlugin([{ imports }]),
      enforce: "pre",
      apply: "build",
    },
  ],
  build: {
    lib: {
      entry: resolve(__dirname, "src/Mikrofrontend.tsx"),
      name: "sokos-attestasjon-frontend",
      formats: ["es"],
      fileName: () => `bundle.js`,
    },
  },
  test: {
    globals: true,
    environment: "jsdom",
    deps: {
      inline: ["@testing-library/user-event"],
    },
  },
});

请问是我的Vite配置有遗漏，还是有其他推荐的解决方案可以保持应用原有功能？

方案1：改用Vite原生的import.meta.env #

Vite不会默认在浏览器环境注入process对象，推荐使用它原生提供的import.meta.env来处理环境判断：

修改环境判断代码：

function getEnvironment(): "production" | "development" {
  if (import.meta.env.PROD) {
    return "production";
  }
  return "development";
}

// API_URL和apiUrl的代码保持不变

import.meta.env.PROD是Vite内置的布尔变量，生产构建时会被替换为true，开发环境为false；对应的还有import.meta.env.DEV（开发环境为true）。

如果需要TypeScript类型提示，在src/env.d.ts中添加以下声明（没有该文件则新建）：

/// <reference types="vite/client" />

方案2：在Vite配置中手动注入process.env #

如果想继续沿用process.env写法，可以通过Vite的define配置手动注入变量：

修改Vite配置文件，在根配置中添加define字段：

export default ({ command }: ConfigEnv): UserConfigExport => ({
  // 其他原有配置保持不变
  define: {
    'process.env.NODE_ENV': JSON.stringify(command === 'build' ? 'production' : 'development'),
  },
  // ... 剩余配置
});

构建时Vite会把process.env.NODE_ENV替换为对应字符串，避免浏览器环境找不到process对象的问题。

方案3：使用环境变量文件（更灵活的多环境管理） #

如果需要管理更多环境变量，可以创建对应环境的配置文件：

• 创建.env.development文件：

VITE_API_URL=http://localhost:5173/api/endpoint

• 创建.env.production文件：

VITE_API_URL=https://ingress-url/api/endpoint

然后直接在代码中使用：

export const apiUrl = import.meta.env.VITE_API_URL;

Vite会自动根据当前环境加载对应.env文件，注意变量名必须以VITE_开头才会被暴露给客户端代码。

内容的提问来源于stack exchange，提问作者user16269092