React项目构建后.env变量暴露于编译后的JS文件问题咨询

原因 #

这是Vite的正常预期行为。Vite规则是：带有VITE_前缀的环境变量会被注入客户端代码，在执行npm run build时，会直接把代码里的import.meta.env.VITE_XXX替换成变量的实际值，所以编译后的JS文件里会明文显示这些值——毕竟浏览器需要拿到这些值才能运行客户端代码。

另外你在vite.config.ts里手动调用dotenv.config()属于多余操作，Vite会自动加载项目根目录下的.env、.env.production等环境变量文件，不需要额外配置这段代码。

关键提醒 #

如果是敏感信息（比如API密钥、数据库密码这类），绝对不能用VITE_前缀，也不能放到客户端代码里。这类敏感内容必须放在后端服务中，客户端需要相关能力时，调用自己的后端接口，由后端去处理敏感操作。

解决步骤 #

1. 移除多余配置：把vite.config.ts里的import { config } from 'dotenv';和config({ path: join(__dirname, '.env') });这两行删掉即可。
2. 区分变量用途：
   • 非敏感的客户端配置（比如接口域名、网站名称），继续用VITE_前缀正常使用。
   • 敏感变量不要加VITE_前缀，这样Vite不会把它们注入客户端，你可以在后端代码里直接读取这些变量。

调整后的vite.config.ts #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vue from '@vitejs/plugin-vue'
import { join } from 'path';

export default defineConfig({
  plugins: [
    vue(),
    react()
  ]
})

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