我想使用Vite从**.env**文件加载环境变量我使用了Docs中提到的import.meta.env对象.env文件:
import.meta.env
.env
TEST_VAR=123F
当尝试通过import.meta.env-〉import.meta.env.TEST_VAR访问此变量时,它返回undefined。那么,我如何才能访问它们?
import.meta.env.TEST_VAR
xdyibdwo1#
根据文档,您需要在变量前面加上VITE_:为了防止意外地将env变量泄漏到客户机,只有以VITE_为前缀的变量才会暴露给您的Vite处理代码。如果您试图访问应用源代码外部的env变量(例如vite.config.js内部),则必须使用loadEnv():
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 }); }
// 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()] }); };
pieyvz9o2#
如果您想访问环境变量TEST_VAR,您应该在它前面加上前缀VITE_尝试一些类似
VITE_TEST_VAR=123f
您可以通过以下方式访问它
import.meta.env.VITE_TEST_VAR
hk8txs483#
以下是我犯的三个错误/陷阱。
src
.env.development
npm run dev
insrf1ej4#
另一个对我有效的解决方案是在vite.config.js中手动调用dotenv.config(),这将把变量从.env(所有变量!)加载到process.env中:
dotenv.config()
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'
jm2pwxwz5#
如docs中所述,您可以通过mdoify envPrefix更改前缀。以envPrefix开头的环境变量将通过import.meta.env公开给客户机源代码。因此将其更改为TEST_也可以。
envPrefix
TEST_
export default defineConfig({ ... envPrefix: 'TEST_', ... })
您可以根据需要更改此选项**,但空字符串('')的**除外。envPrefix不应设置为'',这将暴露您所有的env变量,并导致敏感信息意外泄漏。Vite在检测''时将抛出错误。因此直接覆盖dotenv配置以完全删除前缀可能是一个不适当的操作,因为用env编写的所有字段都将直接发送到客户端。
''
5条答案
按热度按时间xdyibdwo1#
根据文档,您需要在变量前面加上
VITE_
:为了防止意外地将env变量泄漏到客户机,只有以VITE_为前缀的变量才会暴露给您的Vite处理代码。
如果您试图访问应用源代码外部的env变量(例如
vite.config.js
内部),则必须使用loadEnv()
:适用于苗条套件
pieyvz9o2#
如果您想访问环境变量TEST_VAR,您应该在它前面加上前缀
VITE_
尝试一些类似
您可以通过以下方式访问它
hk8txs483#
以下是我犯的三个错误/陷阱。
src
目录中。文件名.env
和/或.env.development
在本地运行时将有效。npm run dev
VITE_
(正如Mahmoud和Wonkledge已经提到的)insrf1ej4#
另一个对我有效的解决方案是在
vite.config.js
中手动调用dotenv.config()
,这将把变量从.env
(所有变量!)加载到process.env
中:其中
.env
文件可以是:jm2pwxwz5#
如docs中所述,您可以通过mdoify
envPrefix
更改前缀。以
envPrefix
开头的环境变量将通过import.meta.env公开给客户机源代码。因此将其更改为
TEST_
也可以。您可以根据需要更改此选项**,但空字符串(
''
)的**除外。envPrefix
不应设置为''
,这将暴露您所有的env变量,并导致敏感信息意外泄漏。Vite在检测''
时将抛出错误。因此直接覆盖dotenv配置以完全删除前缀可能是一个不适当的操作,因为用env编写的所有字段都将直接发送到客户端。