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

Question

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

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

.env文件：

TEST_VAR=123F

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

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

Answer 1

根据文档，您需要为变量添加前缀VITE_：

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

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

Answer 2

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

尝试类似的东西

VITE_TEST_VAR=123f

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

import.meta.env.VITE_TEST_VAR

Answer 3

以下是让我陷入困境的三个错误/陷阱。

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

Answer 4

对我有用的另一个解决方案是手动dotenv.config()调用vite.config.js. 这会将变量.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'

请参阅演示。