提问人：Matt 提问时间：2/27/2021 最后编辑：Alex WayneMatt 更新时间：11/18/2023 访问量：86196
如何在 vite.config.js 中使用 Vite 环境变量？
How can I use Vite env variables in vite.config.js?
问：
在我的 Vite 项目中包含以下内容：.env
# To prevent accidentally leaking env variables to the client, only
# variables prefixed with VITE_ are exposed to your Vite-processed code
VITE_NAME=Wheatgrass
VITE_PORT=8080
我怎样才能在我的 ？VITE_PORTvite.config.js
答：
149赞
Matt
2/27/2021
#1
您可以加载 env 变量并将它们添加到 env 变量中：app levelNode level
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
export default ({ mode }) => {
process.env = {...process.env, ...loadEnv(mode, process.cwd())};
// import.meta.env.VITE_NAME available here with: process.env.VITE_NAME
// import.meta.env.VITE_PORT available here with: process.env.VITE_PORT
return defineConfig({
plugins: [vue()],
server: {
port: parseInt(process.env.VITE_PORT),
},
});
}
评论
21赞
F. Müller
2/7/2022
如果上述方法不适合您（例如，您要导入一个不以 . 为前缀的变量。试试这个：prefx（第三个参数）在这里确实有所作为。VITE_process.env = { ...process.env, ...loadEnv(mode, process.cwd(), '') };
0赞
Brent Arias
1/13/2023
关于赋值，我的给了我错误“类型'字符串'不可赋值到类型'number'”。我该如何解决这个问题？server.portvite.config.ts
0赞
robere2
1/15/2023
@BrentArias 环境变量始终是字符串，但 Vite 的类型定义需要一个数字。使用 parseInt。
0赞
PACE
4/2/2023
谢谢它在文件中工作vite.config.ts
0赞
StrikeAgainst
4/9/2023
注意：最好使用而不是破坏结构！当我像这样添加 env 变量时，键以某种方式失去了不区分大小写（在 Windows 上运行）。具体来说，运行对我来说失败了，因为 is 未定义，而 IS 已定义。当我使用时，这种情况不再发生。Object.assign(process.env, loadEnv(mode, process.cwd()))process.envnpx viteprocess.env.SYSTEMROOTprocess.env.SystemRootObject.assign
8赞
Goutham J.M
8/3/2022
#2
如果 @matt 的上述解决方案不适合您，请更改下面的 /vite.config.tsvite.config.js
第1个解决方案
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig(({ mode }) => {
const env = loadEnv(
'mock',
process.cwd(),
''
)
const processEnvValues = {
'process.env': Object.entries(env).reduce(
(prev, [key, val]) => {
return {
...prev,
[key]: val,
}
},
{},
)
}
return {
plugins: [vue()],
define: processEnvValues
}
}
第二种解决方案
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
export default ({ mode }) => {
process.env = Object.assign(process.env, loadEnv(mode, process.cwd(), ''));
return defineConfig({
plugins: [vue()],
});
}
评论
1赞
ShadowGames
1/6/2023
我可以在哪里放置控制台.log以查看“define”背后的值？
0赞
Goutham J.M
1/9/2023
它应该可以工作之后，如果不可能，我会检查一次processEnvVales
0赞
ShadowGames
1/9/2023
之后的控制台.log不会在终端或Web开发人员控制台中打印出任何日志。
1赞
Byron2017
3/19/2023
#3
也许这对于使用 react 和 vite 的人来说很有用
vite.config.js
import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
// export default defineConfig({
// plugins: [react()],
// })
export default defineConfig(({ mode }) => {
const env = loadEnv("mock", process.cwd(), "");
const processEnvValues = {
"process.env": Object.entries(env).reduce((prev, [key, val]) => {
console.log(key, val);
return {
...prev,
[key]: val,
};
}, {}),
};
return {
plugins: [react()],
define: processEnvValues,
};
});
如何测试：
1.- 将这些变量添加到新的 .env 或 .env.local 文件中
REACT_APP_MAILCHIMP_URL="https://gmail.xxxx.com/subscribe/post"
REACT_APP_MAILCHIMP_U="xxxxxxxxxxxxxxxxx"
REACT_APP_MAILCHIMP_ID="YYYYYYYYYYYY"
2.- 添加新的组件组件/Test.js 文件
export const Test = () => {
console.log(import.meta.env.REACT_APP_MAILCHIMP_URL);
console.log(import.meta.env.REACT_APP_MAILCHIMP_U);
console.log(import.meta.env.REACT_APP_MAILCHIMP_ID);
const a_var = `${process.env.REACT_APP_MAILCHIMP_URL}`;
console.log(a_var);
return (
<div>
<small> You are running this application in mode.:
<b>{process.env.NODE_ENV}</b>
</small>
<div>
<small> REACT_APP_NOT_SECRET_CODE:
<b> {process.env.REACT_APP_MAILCHIMP_URL}</b>
</small>
</div>
</div>
);
};
3.- 将测试组件添加到 App.js 文件
import "./App.css";
import { Test } from "./components/Test";
function App() {
return (
<div className="App">
<Test />
</div>
);
}
export default App;
评论
0赞
JEX
4/12/2023
本来打算自己写同样的东西，但你是我的朋友，谢谢。
2赞
Thomas Foskolos
7/11/2023
#4
你可以使用 dotenv
https://github.com/motdotla/dotenv#readme
在您的vite.config.js
import dotenv from 'dotenv'
dotenv.config()
process.env.YOUR_ENV_VAR
3赞
Gabriele Serra
7/28/2023
#5
如果你正在寻找一个更简单的解决方案，你可以做这样的事情：
import { defineConfig, loadEnv } from 'vite';
const env = loadEnv(
'all',
process.cwd()
);
let port = env.VITE_PORT;
类型签名详述如下：loadEnv
function loadEnv(
mode: string,
envDir: string,
prefixes: string | string[] = 'VITE_',
): Record<string, string>
默认情况下，除非更改，否则仅加载前缀为 env 变量。VITE_prefixes
1赞
Samuurai
9/8/2023
#6
如果有人使用基于 firebase 项目名称的 env 文件，例如 .env.yourapp-prod 和 .env.yourapp.dev，您可以将这些运行时变量导入 vite 中，使其可用于如下构建：
import { defineConfig } from 'vite';
import { sveltekit } from '@sveltejs/kit/vite';
import { resolve } from 'path';
import dotenv from 'dotenv';
import fs from 'fs';
export default defineConfig(() => {
// Decide which .env file to load based on the mode
const envFile = process.env.NODE_ENV === 'production' ? 'env.yourapp-prod' :'.env.yourapp-dev';
// Load the environment variables using dotenv and assign to process.env
const envConfig = dotenv.parse(fs.readFileSync(envFile));
process.env = { ...process.env, ...envConfig };
// Convert environment variables for Vite's define option
const envVarsForDefine = Object.fromEntries(
Object.entries(process.env).map(([key, value]) => [`process.env.${key}`, JSON.stringify(value)])
);
return {
plugins: [sveltekit()],
test: {
include: ['src/**/*.{test,spec}.{js,ts}']
},
resolve: {
alias: {
$src: resolve('./src'),
$stores: resolve('./src/lib/stores'),
$assets: resolve('./src/assets'),
$icon: resolve('./node_modules/svelte-bootstrap-icons/lib')
}
},
define: envVarsForDefine
};
});
然后像这样部署应用：
NODE_ENV=staging firebase deploy
或
NODE_ENV=production firebase deploy
1赞
Tharindu Jayasanka
10/5/2023
#7
我遇到了完全相同的问题，并找到了一个灵魂。
import { defineConfig, loadEnv } from 'vite';
export default defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd());
const API_URL = `${env.VITE_API_URL ?? 'http://localhost:3000'}`;
const PORT = `${env.VITE_PORT ?? '300'}`;
return {
server: {
proxy: {
'/api': API_URL,
},
port: PORT,
},
build: {
outDir: 'public',
},
plugins: [react()],
};
});
在 .env 中
VITE_API_URL=https://yourapiurl.com
VITE_PORT=3000
评论