无法在vite.config.js中加载环境变量

Question

我正在开发一个 Vite 项目，我需要从 vite.config.js 中的 .env 文件加载环境变量（APP_PORT）。然而，似乎变量没有正确加载，而是使用了我的后备值（5000）。
项目结构：.

project/
├── .env
├── frontend/
│   ├── vite.config.js
│   └── ...

.env 文件位于项目的根目录中。 vite.config.js 文件位于 frontend 文件夹内。
.env 文件

APP_PORT=5001

vite.config.js 文件

import { defineConfig, loadEnv } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
import { fileURLToPath } from 'url';

const __dirname = path.dirname(fileURLToPath(import.meta.url));

export default ({ mode }) => {
  // Load environment variables for the current mode
  const env = loadEnv(mode, path.resolve(__dirname, '../', ''));
  const port = env.APP_PORT;
  console.log(
    'Loaded environment variables for mode:', env,
    'Path:', __dirname,
    'Port:', port);

  return defineConfig({
    root: 'frontend',
    plugins: [react()],
    optimizeDeps: {
      exclude: ['lucide-react'],
    },
    server: {
      proxy: {
        '/api': {
          target: `http://127.0.0.1:${port || '5000'}`, // Use the loaded env variable
          changeOrigin: true,
          secure: false,
          rewrite: (path) => path.replace(/^\/api/, ''),
          configure: (proxy) => {
            proxy.on('proxyReq', (proxyReq, req) => {
              console.log('Proxying request:', req.url, 'to:', proxyReq.getHeader('host'));
            });
          }
        }
      }
    }
  })
};

即使我在 .env 文件中指定了 APP_PORT，它总是会回落到默认值 (5000)。 vite.config.js 中的 console.log 显示 APP_PORT 未定义。
我尝试过的：
1. 验证 .env 文件位于根目录中并包含正确的变量 (APP_PORT=5001)。
2.修改.env文件后重启Vite开发服务器。
3. 确保 path.resolve(__dirname, '../') 指向 .env 文件的正确目录。
4.添加了调试日志来检查加载的环境变量，但我得到了未定义。
预期行为： 应加载 .env 文件中的 APP_PORT 变量，并且 vite.config.js 中的代理应使用端口 5001。
环境：。 节点：v23.4.0 威特：v6.0.3 操作系统：macOS

Answer 1

问题可能是因为您的 vite.config.js 文件位于 frontend 子目录中，而 .env 文件位于项目的根目录中。默认情况下，Vite 会查找相对于 vite.config.js 文件位置或 Vite 配置中设置的根目录的 .env 文件。

要解决此问题，您有以下几种选择：

选项1：在vite.config.js中设置root 你可以告诉Vite以你项目的根目录为基础。像这样更新你的 vite.config.js：

import { defineConfig } from 'vite';
export default defineConfig({
    root: '../', 
    server: {
        port: process.env.APP_PORT || 5000, or fallback
    },
});

选项2：使用dotenv库

import { defineConfig } from 'vite';
import dotenv from 'dotenv';
import path from 'path';

dotenv.config({ path: path.resolve(__dirname, '../.env') });

export default defineConfig({
    server: {
        port: process.env.APP_PORT || 5000, e or fallback
    },
});

选项3：将Vite配置移至根文件夹