在 Vite 配置中访问 dotenv (.env) 变量和构建模式

Question

遵循Vite 的 dotenv 指南，我已经能够在项目中使用 .env 变量进行设置，这些变量依赖于使用不同文件（例如.env.beta，启动vite ... --mode beta）的不同模式（测试模式、生产模式等）。

但是，我想根据vite.config.ts这些模式进行一些修改。例如，如果我使用 构建，--mode beta我想更改在 vite 配置中实例化为插件的 PWA 标题和图标路径，但这些是在 中定义的vite.config.ts，据我所知，它无法访问环境变量（例如import.meta.env.VITE_BETA）。

如何访问构建模式或环境变量以进行vite.config.ts更改？

Answer 1

要添加到 @MichalLevy\'s将函数传递给基于条件配置的答案：defineConfig()mode

\n

您可以使用ViteloadEnv()加载.env特定模式的文件：

\n

                           \nimport { defineConfig, loadEnv } from \'vite\'\nimport { VitePWA } from \'vite-plugin-pwa\'\n\nexport default defineConfig(({ command, mode }) => {\n                 \n  const env = loadEnv(mode, process.cwd())\n\n  const pwaTitle = `${env.VITE_PWA_TITLE ?? \'\'} - ${+Date.now()}`\n\n  return {\n    plugins: [\n      VitePWA({\n        manifest: {\n          name: pwaTitle,\n          \xe2\x8b\xae\n        },\n      })\n    ],\n  }\n})\n

\n

演示

\n