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

Question

在维特氏导管之后，我已经能够在我的项目中使用.env变量来设置这些变量，这些变量依赖于不同的模式(beta模式、生产等)，使用不同的文件(例如.env.beta，使用vite ... --mode beta启动)。

但是，我想根据这些模式对vite.config.ts做一些修改。例如，如果我使用--mode beta构建，我希望将PWA标题和图标路径更改为在vite配置中实例化为插件，但这些都是在vite.config.ts中定义的，据我所知，vite.config.ts不能访问env变量(例如import.meta.env.VITE_BETA)。

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

Answer 1

在@MichalLevy的https://stackoverflow.com/a/72323569/6277151中添加一个基于mode__的https://vitejs.dev/config/#conditional-config函数：

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

import { defineConfig, loadEnv } from 'vite'
import { VitePWA } from 'vite-plugin-pwa'

export default defineConfig(({ command, mode }) => {
                 
  const env = loadEnv(mode, process.cwd())

  const pwaTitle = `${env.VITE_PWA_TITLE ?? ''} - ${+Date.now()}`

  return {
    plugins: [
      VitePWA({
        manifest: {
          name: pwaTitle,
          ⋮
        },
      })
    ],
  }
})

演示