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

k2fxgqgv  于 2023-01-29  发布在  Java
关注(0)|答案(5)|浏览(343)

我想使用Vite从**.env**文件加载环境变量
我使用了Docs中提到的import.meta.env对象
.env文件:

TEST_VAR=123F

当尝试通过import.meta.env-〉import.meta.env.TEST_VAR访问此变量时,它返回undefined。
那么,我如何才能访问它们?

xdyibdwo

xdyibdwo1#

根据文档,您需要在变量前面加上VITE_
为了防止意外地将env变量泄漏到客户机,只有以VITE_为前缀的变量才会暴露给您的Vite处理代码。
如果您试图访问应用源代码外部的env变量(例如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.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()]
    }); 
};
pieyvz9o

pieyvz9o2#

如果您想访问环境变量TEST_VAR,您应该在它前面加上前缀VITE_
尝试一些类似

VITE_TEST_VAR=123f

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

import.meta.env.VITE_TEST_VAR
hk8txs48

hk8txs483#

以下是我犯的三个错误/陷阱。

  • 确保.env文件位于根目录中,而不是src目录中。文件名.env和/或.env.development在本地运行时将有效。
  • 重新启动本地Web服务器以显示变量:npm run dev
  • 变量前缀为VITE_(正如Mahmoud和Wonkledge已经提到的)
insrf1ej

insrf1ej4#

另一个对我有效的解决方案是在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
  },
  //....
}

其中.env文件可以是:

VALUE='My env var value'
jm2pwxwz

jm2pwxwz5#

docs中所述,您可以通过mdoify envPrefix更改前缀。
envPrefix开头的环境变量将通过import.meta.env公开给客户机源代码。
因此将其更改为TEST_也可以。

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

您可以根据需要更改此选项**,但空字符串('')的**除外。
envPrefix不应设置为'',这将暴露您所有的env变量,并导致敏感信息意外泄漏。Vite在检测''时将抛出错误。
因此直接覆盖dotenv配置以完全删除前缀可能是一个不适当的操作,因为用env编写的所有字段都将直接发送到客户端。

相关问题