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
});
}
// 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()]
});
};
.env
文件将隐式加载VITE_
环境变量。需要使用loadEnv
,但我在文档中没看到它的介绍 O.o。Vite 版本:3.1.4 - LarryloadEnv
(https://vitejs.dev/guide/api-javascript.html#loadenv)的文档允许我们更改前缀:`process.env = {...process.env, ...loadEnv(mode, process.cwd(), "VUE_")};`。 - AymKdnVITE_
。 - Gangula如果您想访问环境变量 TEST_VAR,您应该在前面加上VITE_
尝试类似以下内容:
VITE_TEST_VAR=123f
你可以通过以下方式访问它:
import.meta.env.VITE_TEST_VAR
// @ts-ignore
可以帮助解决。 - Eugene P.import.meta.env
访问环境变量。为了获得 IntelliSense 支持,请将以下类型定义文件添加到项目中:///
这将导入与 import.meta.env
配套的类型声明,使得能够获得代码补全和类型检查等 IDE 功能。 - robertovgNode.js
中,您可以使用 process.env.VITE_TEST_VAR
定期访问它。 - Eli Zatlawy以下是我曾经遇到的三个错误/陷阱。
src
目录下。文件名为 .env
和/或 .env.development
适用于本地运行。npm run dev
VITE_
(如 Mahmoud 和 Wonkledge 已经提到的)vite.config.ts
中设置 envDir
选项:export default defineConfig({
plugins: [react()],
envDir: './src/environments'
})
- bene-wesrc
文件夹中创建了.env.development
文件,而不是根目录。 - bishopindex.html
所在的位置),而不是顶级项目文件夹。如果您已经设置了root
选项,那么这两者是不同的。@bishop 我猜你已经设置了root: "./src"
。 - hendalst另一个对我有效的解决方案是在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'
请查看演示。
如文档所述,您可以通过修改envPrefix
来更改前缀。
以
envPrefix
开头的环境变量将通过import.meta.env在客户端源代码中公开。
因此,将其更改为TEST_
也可以正常工作。
export default defineConfig({
...
envPrefix: 'TEST_',
...
})
''
)。
因此,直接覆盖 dotenv 配置以完全删除前缀可能是不合适的操作,因为所有写入 env 中的字段将直接发送到客户端。
envPrefix
不应设置为''
,这将暴露所有环境变量并导致敏感信息意外泄漏。当检测到''
时,Vite 将抛出错误。
npm install dotenv --save
.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
。我遇到了同样的问题,通过运行以下代码解决了它。
pnpm add dot-env
pnpm add -S dotenv-webpack.
VITE_
,即将MAP_API_KEY
更改为VITE_MAP_API_KEY
。我面临过类似的问题,所以这里有一些建议来解决在使用 .env 和 Vite 时遇到的问题: