如何在Preact中隐藏API密钥 解决.env配置process未定义报错

浏览器原生不支持Node.js的process全局对象，React脚手架（如CRA）默认在构建时自动注入了模拟的process对象并替换REACT_APP_开头的环境变量，而Preact的默认构建配置未做该兼容，因此直接复用React的process.env写法会触发报错。

分两种主流的Preact项目搭建场景处理：

1. 基于Preact CLI创建的项目 #

• 所有需要在前端代码中使用的环境变量，必须在.env文件中添加PREACT_APP_前缀，示例：

PREACT_APP_API_KEY = 你的API密钥
PREACT_APP_API_BASE_URL = https://api.example.com

• 代码中通过import.meta.env读取变量即可，无需使用process：

const apiKey = import.meta.env.PREACT_APP_API_KEY

2. 基于Vite创建的Preact项目 #

• 所有需要在前端代码中使用的环境变量，必须在.env文件中添加VITE_前缀，示例：

VITE_API_KEY = 你的API密钥
VITE_API_BASE_URL = https://api.example.com

• 代码中通过import.meta.env读取变量：

const apiKey = import.meta.env.VITE_API_KEY

• 若必须兼容旧的process.env写法，可在vite.config.js中添加如下配置（不推荐，存在变量泄露风险）：

import { defineConfig } from 'vite'
import preact from '@preact/preset-vite'

export default defineConfig({
  plugins: [preact()],
  define: {
    'process.env': process.env
  }
})

所有带指定前缀的环境变量都会被打包到客户端代码中，可通过浏览器调试工具直接查看，因此不要在.env中存储高敏感密钥（如服务端加密密钥、支付私钥等）。高敏感接口请求必须走后端代理转发，避免密钥直接暴露在前端。

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