Vite+React项目Axios结合process.env获取数据报错求助

问题分析 #

你当前的配置错误在于直接覆盖process.env，且不符合Vite环境变量的处理规范，导致环境变量无法正确注入到前端代码中。

解决方案 #

1. 修正 vite.config.js 配置 #

不要直接替换全局process.env，而是通过loadEnv加载环境变量后按需注入：

import { defineConfig, loadEnv } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig(({ mode }) => {
  // 加载对应环境的变量，第三个参数为空字符串表示加载所有前缀的变量
  const env = loadEnv(mode, process.cwd(), '');
  
  return {
    plugins: [react()],
    // 按需注入需要的环境变量到前端的process.env中
    define: {
      'process.env.API_KEY': JSON.stringify(env.API_KEY)
    }
  };
});

2. 配置环境变量文件 #

在项目根目录创建对应环境的.env文件：

• 开发环境：.env.development
• 生产环境：.env.production

文件内容示例（注意不要加引号）：

API_KEY=你的实际API密钥

3. 在组件中使用环境变量 #

直接通过process.env.API_KEY拼接API地址：

import axios from 'axios';

const fetchData = async () => {
  try {
    const res = await axios.get(`https://目标API地址?api_key=${process.env.API_KEY}`);
    console.log(res.data);
  } catch (err) {
    console.error('请求失败:', err);
  }
};

4. 额外提示 #

• 若不想手动配置define，可以给环境变量加上VITE_前缀（比如VITE_API_KEY），Vite会自动将其注入到import.meta.env中，直接用import.meta.env.VITE_API_KEY访问即可
• 修改.env文件后必须重启Vite开发服务器，否则新的环境变量不会生效
• 不要将包含敏感信息的.env文件提交到版本控制，确保.gitignore中包含.env*（除了.env.example）

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