如何在Yarn+Vite搭建的React项目中用process.env获取API密钥

你遇到的问题核心是Vite不使用process.env来访问环境变量，它的环境变量规则和Create React App（CRA）完全不同，具体解决步骤如下：

1. 修正.env文件的变量前缀 #

Vite要求环境变量必须以VITE_开头（而非CRA的REACT_APP_），所以先修改你的.env文件：

# 原配置（无效）
# REACT_APP_API_URL=你的API地址
# REACT_APP_API_TOKEN=你的密钥

# 修改后（有效）
VITE_API_URL=你的API地址
VITE_API_TOKEN=你的密钥

注意：.env文件必须放在项目根目录，且要确保它被加入.gitignore，避免敏感信息提交到版本库。

2. 替换代码中的环境变量访问方式 #

把代码里的process.env替换为Vite的import.meta.env，同时注意Authorization头的格式（"Bearer"后面必须加空格，否则认证会失败）：

useEffect(() => {
  const fetchData = async () => {
    try {
      const data = await axios.get(
        `${import.meta.env.VITE_API_URL}/products`,
        {
          headers: {
            Authorization: `Bearer ${import.meta.env.VITE_API_TOKEN}`,
          },
        }
      )
      console.log(data)
    } catch (err) {
      console.log(err)
    }
  }
  fetchData()
}, [])

额外注意事项 #

• 修改.env文件后，必须重启Vite开发服务器，新的环境变量才会生效。
• 生产环境构建时，Vite会自动将import.meta.env的变量替换为实际值，无需额外配置。
• 客户端环境下API Token会暴露给用户，若涉及敏感操作，建议通过后端代理请求，或使用更安全的认证方案（比如Session、HttpOnly Cookie）。

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