如何使用Vite从.env文件加载环境变量

Question

如何使用Vite从.env文件加载环境变量

javascriptenvironment-variablesviteenv-file

122

我想使用Vite从.env文件中加载环境变量。

我按照文档中提到的方法使用了import.meta.env对象。

.env文件：

TEST_VAR=123F

当尝试通过import.meta.env -> import.meta.env.TEST_VAR访问此变量时，它返回undefined。

那么，我该如何访问它们呢？

- Mohamed Fadl

4

只有以VITE_前缀开头的变量才能在您的JS / Vue代码中可见。请查看它们的文档https://vitejs.dev/guide/env-and-mode.html。 - Joel Chu

你需要使用VITE_APP_xxxxxx来定义ENV文件中的变量。 - undefined

13个回答

98

如果您想访问环境变量 TEST_VAR，您应该在前面加上VITE_

尝试类似以下内容：

VITE_TEST_VAR=123f

你可以通过以下方式访问它：

import.meta.env.VITE_TEST_VAR

- Wonkledge

10

但是使用import.meta.env时，我会收到一个错误，指出找不到meta名称。 - Héctor

1

我不知道为什么会抛出错误，但是在上一行加上 // @ts-ignore 可以帮助解决。 - Eugene P.

3

在 TypeScript 中使用 Vite 时，可以通过 import.meta.env 访问环境变量。为了获得 IntelliSense 支持，请将以下类型定义文件添加到项目中：/// 这将导入与 import.meta.env 配套的类型声明，使得能够获得代码补全和类型检查等 IDE 功能。 - robertovg

在 Node.js 中，您可以使用 process.env.VITE_TEST_VAR 定期访问它。 - Eli Zatlawy

1

@EliZatlawy 不行，你不能这样做。 - dark_ruby

是的，那是工作。 - undefined

48

以下是我曾经遇到的三个错误/陷阱。

确保 .env 文件位于根目录下，而不是 src 目录下。文件名为 .env 和/或 .env.development 适用于本地运行。
重启本地 Web 服务器以使变量出现：npm run dev
在变量前加上前缀 VITE_（如 Mahmoud 和 Wonkledge 已经提到的）

- James Lawruk

4

或者，在 vite.config.ts 中设置 envDir 选项：

export default defineConfig({
  plugins: [react()],
  envDir: './src/environments'
})

- bene-we

2

让我困惑的是没有意识到我在src文件夹中创建了.env.development文件，而不是根目录。 - bishop

1

请注意，当vite文档提到“root”时，它们指的是项目根目录（即index.html所在的位置），而不是顶级项目文件夹。如果您已经设置了root选项，那么这两者是不同的。@bishop 我猜你已经设置了root: "./src"。 - hendalst

1

我刚刚浪费了两个小时，因为我的环境文件在项目文件夹之外。 - ben_g_123

12

另一个对我有效的解决方案是在vite.config.js中手动调用dotenv.config()。这将把.env中的变量（全部！）加载到process.env中：

import { defineConfig } from 'vite'
import dotenv from 'dotenv'

dotenv.config() // load env vars from .env

export default defineConfig({
  define: {
    __VALUE__: `"${process.env.VALUE}"` // wrapping in "" since it's a string
  },
  //....
}

.env文件可能位于何处：

VALUE='My env var value'

请查看演示。

- Dmitri Pavlutin

2

如文档所述，您可以通过修改envPrefix来更改前缀。

以envPrefix开头的环境变量将通过import.meta.env在客户端源代码中公开。

因此，将其更改为TEST_也可以正常工作。

export default defineConfig({
...
  envPrefix: 'TEST_',
...
})

你可以随意更改此选项，除了空字符串（''）。

envPrefix 不应设置为 ''，这将暴露所有环境变量并导致敏感信息意外泄漏。当检测到 '' 时，Vite 将抛出错误。

因此，直接覆盖 dotenv 配置以完全删除前缀可能是不合适的操作，因为所有写入 env 中的字段将直接发送到客户端。

- kimdw9983

1

问题在于import.meta.env.VITE_API返回undefined。为了解决问题，请按照以下步骤进行排查：

将.env文件保存在项目的根目录下。
检查.env文件中的变量名是否与您在代码中访问的名称匹配。
重新启动Vite开发服务器以应用来自.env文件的更改。
确保dotenv配置在您的vite.config.js中正确设置。
确认您正在使用支持import.meta.env的Vite版本。
确认您在代码中正确导入和使用import.meta.env.VITE_API。如果您按照这些步骤仍然遇到问题，请提供更多上下文或代码片段以获得进一步的帮助。

- Alhdrin Gungon

0

如果有人仍然在努力解决这个问题，你可能需要导入dotenv库才能使其正常工作。

 npm install dotenv --save

这在我的情况下解决了问题。

- sigma1510

0

我使用以下方法使.env文件正常工作：

const env = await import.meta.env;
export const version = (env.VITE_APP_VERSION);
export const buildDate = (env.VITE_APP_BUILD_TIME);

关键是await。

这也适用于.env.development / cmd：VITE_APP_VERSION=development vite。

- ian

0

我遇到了同样的问题，通过运行以下代码解决了它。

pnpm add dot-env
pnpm add -S  dotenv-webpack.

最后，我确保在我的环境变量名称之前添加了 VITE_，即将MAP_API_KEY更改为VITE_MAP_API_KEY 。

- Tabot Charles Bessong

0

我面临过类似的问题，所以这里有一些建议来解决在使用 .env 和 Vite 时遇到的问题：

首先，尝试直接粘贴密钥的源代码。如果可以正常工作，那很可能是你的 .env 配置出了问题。
将 .env 文件放在根目录而不是 src 目录中。无论你选择 .env 还是 .env.development 作为文件名，在本地运行时都应该可以工作。
修改 .env 文件后，确保重新启动本地 web 服务器（npm run dev），以确保更新的变量生效。
为确保正确识别，请记得在变量前加上 VITE_ 前缀。这一步对于它们的正确功能非常重要。

- Guy T

根据目前的写法，你的回答不够清晰。请编辑以添加更多细节，帮助其他人理解这如何回答所提出的问题。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community

这个回答看起来像是由人工智能（如ChatGPT）生成的，而不是由真正的人类生成的。你应该知道，在Stack Overflow上发布由AI生成的内容是被禁止的。如果这个回答确实是由AI生成的，那么我强烈建议你在陷入更大麻烦之前删除它：我们在这里非常重视抄袭问题。请阅读：为什么目前不允许发布GPT和ChatGPT生成的回答。 - tchrist

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Mahmoud · Accepted Answer

根据docs的说明，你需要在变量前加上VITE_前缀：

为了防止意外地将环境变量泄露给客户端，只有以VITE_为前缀的变量才会暴露给你的经过Vite处理的代码。

如果你想在应用源代码之外访问环境变量（例如在vite.config.js中），那么你需要使用loadEnv()函数：

import { defineConfig, loadEnv } from 'vite';

export default ({ mode }) => {
    // Load app-level env vars to node-level env vars.
    process.env = {...process.env, ...loadEnv(mode, process.cwd())};

    return defineConfig({
      // To access env vars here use process.env.TEST_VAR
    });
}

对于SvelteKit

// vite.config.js

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig, loadEnv } from 'vite';

/** @type {import('vite').UserConfig} */
export default ({ mode }) => {
    // Extends 'process.env.*' with VITE_*-variables from '.env.(mode=production|development)'
    process.env = {...process.env, ...loadEnv(mode, process.cwd())};
    return defineConfig({
        plugins: [sveltekit()]
    }); 
};