javascript - 在 Vite 版本 4 中访问 ENV 文件

Question

我正在开发一个使用 HTML/CSS/JS + Vite.js 构建的 Web 应用程序。我们运行的是 Vite v2.8.3，想升级到最新的 v4.3.3。我能够成功完成更新并运行服务器，但随后发现我无法再访问 DOTENV 文件中的变量。文件或文件结构没有任何变化 - 我所做的只是更新到最新的 Node.js 和 Vite.js。我更新 Vite 后，ENV 文件才停止工作。

我能够通过将 ENV 文件在我的文件结构中下移一级来解决这个问题 - 但这让我担心，因为我不明白为什么需要进行这种更改。

这是我的文件结构:

web-app/
  |-- www-vite
      |-- pages
      |-- index.html
      |-- main.js
      |-- style.css
      |-- vite.config.js
      |-- package.json
      |-- package-lock.json
      |-- node_modules
      |-- .gitignore
  |-- .env.development // Only works when I move it one level down into www-vite directory 
  |-- .env.production // Only works when I move it one level down 
   

以下是 Vite 文档对 ENV variables and modes 的描述。这是迁移guide from v2 ，以及迁移 guide from v3 。我发现更新 Vite，即使只是从 2.8.3 更新到 2.9.5，也会破坏 ENV 变量。

我的 DOTENV 文件如下所示:

VITE_ENDPOINT_BASE_URL = (private URL goes here)

然后我在 main.js 文件中获取 ENV 变量，如下所示:

export const endpoint_base_url = import.meta.env.VITE_ENDPOINT_BASE_URL; 
// Returns undefined after updating Vite, only works after I move it into www-vite directory

这是我的配置文件的样子。我尝试添加“envDir”并根据 docs 指向正确的文件，但这没有用。我看到有一个选项可以使用 loadENV helper ，但我不确定如何将其与配置文件中已有的内容集成。我还想知道我是否需要这样做，或者是否可以将 .env 文件移动到 www-vite 目录中。

vite.config.js

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

module.exports = defineConfig({
  build: {
    rollupOptions: {
      input: {
        envDir: "../.env.production", // Does not work
        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"
        ),
      },
    },
  },
});

Answer 1

要更改默认环境路径，您可以在 vite 配置中设置它

Vite Docs

export default defineConfig({
  envDir: '../'
})