Vite 4版本.env文件访问异常问题及配置咨询

我正在开发基于HTML/CSS/JS + Vite.js的Web应用，原使用Vite v2.8.3，升级至v4.3.3（甚至仅到v2.9.5）后，无法读取web-app根目录的.env.development和.env.production文件，仅移至www-vite目录才生效。

文件结构如下：

web-app/
  |-- www-vite
      |-- pages
      |-- index.html
      |-- main.js
      |-- style.css
      |-- vite.config.js
      |-- package.json
      |-- package-lock.json
      |-- node_modules
      |-- .gitignore
  |-- .env.development // 移至www-vite目录才生效
  |-- .env.production // 移至www-vite目录才生效

.env文件示例：

VITE_ENDPOINT_BASE_URL = (private URL goes here)

在main.js中通过import.meta.env.VITE_ENDPOINT_BASE_URL获取变量，升级后返回undefined，移文件后恢复。我曾在vite.config.js的rollupOptions.input中配置envDir但无效，代码如下：

const { resolve } = require("path");
const { defineConfig} = require("vite");

module.exports = defineConfig({
  build: {
    rollupOptions: {
      input: {
        envDir: "../.env.production", // 无效配置
        main: resolve(__dirname, "index.html"),
        login: resolve(__dirname, "./pages/login/login.html"),
        home: resolve(__dirname, "./pages/home/home.html"),
        recap: resolve(__dirname, "./pages/recap/recap.html"),
        leaderboards: resolve(
          __dirname,
          "./pages/leaderboards/leaderboards.html"
        ),
      },
    },
  },
});

想了解升级后出现问题的原因，是否必须移动.env文件，以及如何正确配置envDir或使用loadENV助手解决问题。

问题原因 #

Vite从v2.9.0版本开始调整了环境变量加载逻辑：

• 旧版（v2.8.x及以前）默认会从当前工作目录向上查找.env文件
• 新版（v2.9.x及以后）默认仅从vite.config.js所在目录加载.env文件，不再自动向上遍历查找

你之前把envDir配置在rollupOptions.input里是错误的——envDir是Vite的顶层配置项，不属于rollupOptions的子项，因此配置完全无效。

解决方案 #

不需要移动.env文件，有两种正确的配置方式：

方式1：配置顶层envDir（推荐） #

在vite.config.js中添加顶层的envDir配置，直接指向web-app根目录：

const { resolve } = require("path");
const { defineConfig} = require("vite");

module.exports = defineConfig({
  // 指定环境变量文件所在目录为web-app根目录
  envDir: resolve(__dirname, "../"),
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, "index.html"),
        login: resolve(__dirname, "./pages/login/login.html"),
        home: resolve(__dirname, "./pages/home/home.html"),
        recap: resolve(__dirname, "./pages/recap/recap.html"),
        leaderboards: resolve(
          __dirname,
          "./pages/leaderboards/leaderboards.html"
        ),
      },
    },
  },
});

配置后Vite会自动加载对应环境的.env文件：开发环境加载.env.development，生产环境加载.env.production。

方式2：使用loadEnv手动加载 #

如果需要更灵活的环境变量控制，可使用Vite提供的loadEnv助手函数手动加载指定目录的.env文件：

const { resolve } = require("path");
const { defineConfig, loadEnv } = require("vite");

module.exports = defineConfig(({ mode }) => {
  // 手动加载web-app根目录下对应环境的.env文件
  const env = loadEnv(mode, resolve(__dirname, "../"));

  return {
    // 可在这里基于env变量做动态配置
    build: {
      rollupOptions: {
        input: {
          main: resolve(__dirname, "index.html"),
          login: resolve(__dirname, "./pages/login/login.html"),
          home: resolve(__dirname, "./pages/home/home.html"),
          recap: resolve(__dirname, "./pages/recap/recap.html"),
          leaderboards: resolve(
            __dirname,
            "./pages/leaderboards/leaderboards.html"
          ),
        },
      },
    },
  };
});

这种方式会根据当前运行的mode自动加载对应后缀的.env文件，同时也会加载通用的.env文件（如果存在），适合需要动态调整配置的场景。

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