如何在 vite.config.js 中使用 Vite 环境变量？

Posted 2023-03-16

【中文标题】如何在 vite.config.js 中使用 Vite 环境变量？

【英文标题】：How can I use Vite env variables in vite.config.js?

【发布时间】：2021-05-29 00:35:27

【问题描述】：

在我的 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.config.js 中使用VITE_PORT？

【参考方案1】：

您可以加载app level 环境变量并将它们添加到Node 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: process.env.VITE_PORT,
        ,
    );

【讨论】：

如果上述方法对您不起作用（例如，您想导入一个不以 VITE_ 为前缀的变量。试试这个：process.env = ...process.env, ...loadEnv(mode, process.cwd(), '') ; 前缀（第三个参数）确实会有所不同.