如何在Vite中使用非VITE_前缀的环境变量？

为防止环境变量意外泄露到客户端，只有以VITE_为前缀的变量才会暴露给经过Vite处理的代码

根据使用场景，分两种方式处理：

仅在服务端/Node.js环境使用 #

直接通过Node.js原生的process.env读取即可，这类变量不会被Vite打包到客户端代码中，无需额外配置。比如：

// 服务端代码（如API路由、服务端渲染逻辑等）
const dbPassword = process.env.DB_PASSWORD;

需要暴露给客户端使用 #

如果要让非VITE_前缀的变量能在客户端代码中访问，需要在Vite配置文件里手动注入：

方法1：通过define选项注入 #

1. 在vite.config.js/vite.config.ts中，先获取环境变量，再通过define定义全局变量：

import { defineConfig } from 'vite';

export default defineConfig({
  define: {
    // 用JSON.stringify处理字符串/数值类型，确保注入后是合法的JS代码
    '__API_BASE_URL__': JSON.stringify(process.env.API_BASE_URL)
  }
});

2. 在客户端代码中直接使用定义好的变量：

console.log(__API_BASE_URL__);

方法2：结合loadEnv加载所有环境变量 #

如果需要加载对应模式下的所有环境变量（不管前缀），可以用loadEnv函数：

import { defineConfig, loadEnv } from 'vite';

export default defineConfig(({ mode }) => {
  // 第三个参数传空字符串，加载所有前缀的环境变量
  const env = loadEnv(mode, process.cwd(), '');
  
  return {
    define: {
      '__APP_VERSION__': JSON.stringify(env.APP_VERSION)
    }
  };
});

⚠️ 注意：手动暴露非VITE_前缀的变量时，务必确认变量内容是可以公开的——敏感信息（如数据库密码、密钥等绝对不能暴露给客户端），避免安全风险。

内容的提问来源于stack exchange，提问作者sureshvv