Vite读取环境变量报错TypeError: Cannot read properties of undefined (reading 'VITE_YOUTUBE_API_KEY')求助

我在尝试从.env文件读取环境变量时遇到了这个错误，想求助大家帮忙看看问题出在哪！

先说说我的情况：

• .env文件放在项目根目录
• 变量都加了**VITE_**前缀
• 我是这么导入变量的：const apiKey = import.meta.env.VITE_YOUTUBE_API_KEY;

我已经查了好多资料，大部分答案不是说“要加VITE前缀”就是“用import.meta.env”，这些我都照做了。后来我还尝试用loadEnv，结果在const env = loadEnv(mode, process.cwd(), '')这行报错“process is not defined”。

我的.env文件内容是这样的（也试过去掉变量的引号，结果还是一样）：

MONGODB_URI="mongodb+srv://USER:PASS@cluster0.f2tb4tn.mongodb.net/tutorialsApp?retryWrites=true&w=majority&appName=Cluster0"
JWT_SECRET="JWT_SECRET"
VITE_YOUTUBE_API_KEY="YOUTUBE_API_KEY"
VITE_CHANNEL_ID="CHANNEL_ID"
VITE_CLIENT_ID="CLIENT_ID"

编辑补充：我的vite.config.js代码如下：

import { transformWithEsbuild, defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// Access import.meta.env directly
const appEnv = import.meta.env;

export default defineConfig({
  plugins: [
    {
      name: "treat-js-files-as-jsx",
      async transform(code, id) {
        if (!id.match(/src\/.*\.js$/)) return null;

        return transformWithEsbuild(code, id, {
          loader: "jsx",
          jsx: "automatic",
        });
      },
    },
    react(),
  ],
  optimizeDeps: {
    force: true,
    esbuildOptions: {
      loader: {
        ".js": "jsx",
      },
    },
  },
  define: {
    __APP_ENV__: JSON.stringify(appEnv),
  },
});

真的很需要大家的帮助，谢谢了！

备注：内容来源于stack exchange，提问作者Wasivis