未捕获引用错误:在vite更新后未定义进程，为什么

Question

我有一个react/typescript应用程序，在我更新vite之前，我有这个解决方案来检查env是通过以下代码开发还是生产的：

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.config.js中遗漏了什么？如果它是升级后的另一个解决方案，那么推荐的解决方案是什么，这样我的应用程序的行为就和以前一样了？

谢谢。

Answer 1

使用import.meta.env.MODE获取模式字符串：

if (import.meta.env.MODE === "production") {
return "production";
}

或者更简单地说，使用import.meta.env.PROD来获得指示生产模式的布尔值：

if (import.meta.env.PROD) {
return "production";
}