Vite项目中vite.config.js无法正确加载根目录.env文件的APP_PORT环境变量

我来帮你排查这个问题，你遇到的情况其实是Vite的loadEnv函数默认行为加上路径写法的小细节导致的，咱们一步步解决：

核心问题拆解 #

1. Vite默认只加载带VITE_前缀的环境变量
   Vite的loadEnv函数出于安全考虑，默认只会读取以VITE_开头的环境变量，你的APP_PORT没有这个前缀，所以默认不会被加载到env对象里。
2. 路径解析的小冗余
   你调用loadEnv时写的path.resolve(__dirname, '../', '')有点冗余，path.resolve(__dirname, '../')已经能正确指向项目根目录（因为__dirname是frontend文件夹，../就是上一级的根目录），多余的空字符串可能会导致路径解析出意外（虽然大概率没问题，但简化更稳妥）。

具体解决方案 #

方案1：修改loadEnv调用，加载所有环境变量

这是最直接的方式，不用改.env里的变量名，只需要调整loadEnv的第三个参数和路径：

把你vite.config.js里的loadEnv调用改成下面这样：

const env = loadEnv(mode, path.resolve(__dirname, '../'), '');

• 第三个参数设为''，表示加载所有前缀的环境变量（而不是默认只加载VITE_开头的）
• 路径简化为path.resolve(__dirname, '../')，确保指向项目根目录的.env文件

方案2：给环境变量加VITE_前缀（可选）

如果你不想修改loadEnv的参数，也可以给.env里的变量加前缀：

# .env文件修改后
VITE_APP_PORT=5001

然后在vite.config.js里用env.VITE_APP_PORT来获取值：

const port = env.VITE_APP_PORT;

修改后的完整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 }) => {
  // 【修改点1】修正loadEnv的路径和第三个参数
  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': {
          // 【这里不用改，port能正确获取到值后就会用5001】
          target: `http://127.0.0.1:${port || '5000'}`,
          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'));
            });
          }
        }
      }
    }
  })
};

额外注意事项 #

1. 一定要重启Vite开发服务器：环境变量只有在服务启动时才会加载，修改.env或vite.config.js后必须重启服务，不然新的配置不会生效。
2. 检查.env文件的语法：变量名和值之间不能有空格，比如不能写成APP_PORT = 5001，必须是APP_PORT=5001，否则值会带空格导致端口无效。
3. 确认mode参数的正确性：loadEnv会根据当前mode加载对应的.env文件，比如mode=production时会加载.env.production，如果你的变量在通用的.env文件里，不管什么mode都会加载，这点没问题。

修改完之后再启动服务，你应该就能看到console.log里的port是5001，代理也会正确指向这个端口啦！

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