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

Question

我想使用 Vite

从 .env 文件加载环境变量

我使用了 import.meta.env 中提到的对象 Docs

.env 文件:

TEST_VAR=123F

当尝试通过 import.meta.env -> import.meta.env.TEST_VAR 访问此变量时，它 returns 未定义。

那么，我怎样才能访问它们？

Answer 1

如果你想访问你的环境变量 TEST_VAR 你应该在它前面加上 VITE_

试试

VITE_TEST_VAR=123f

您可以通过

访问它

import.meta.env.VITE_TEST_VAR

Answer 2

根据 docs，您需要在变量前加上 VITE_:

To prevent accidentally leaking env variables to the client, only variables prefixed with VITE_ are exposed to your Vite-processed code.

如果您尝试访问应用程序源代码外部的环境变量（例如 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
    });
}

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

How to load environment variables from .env file using Vite

javascript

environment-variables

env-file

vite