Vite中base配置不生效：import.meta.env.BASE_URL值异常求助

先澄清一个误区：Vite的base配置不是用来设置API域名的 #

你之前在vite.config.js里配置的base字段，作用是指定静态资源（如JS、CSS、图片）的加载路径，和API请求的Base URL完全是两回事。所以不管怎么配置base，import.meta.env.BASE_URL在开发环境默认就是/（对应dev server的根路径），生产环境则是build时设置的静态资源前缀，它本来就不是给API调用用的。

正确实现API Base URL的环境切换 #

直接用Vite原生的环境变量机制，简单且无副作用：

1. 在项目根目录创建两个环境文件：

   • .env.development（开发环境用）：

     VITE_API_BASE_URL=https://localhost:7251
     

   • .env.production（生产环境用）：

     VITE_API_BASE_URL=https://your-production-api-domain.com
     

   注意变量名必须以VITE_开头，Vite才会自动把它注入到客户端代码中。

2. 在代码里直接调用这个变量：

   // API请求示例
   const apiResponse = await fetch(`${import.meta.env.VITE_API_BASE_URL}/api/user`);
   

   开发时执行npm run dev会自动使用.env.development的变量，构建生产包时npm run build会自动切换到.env.production的配置，完全不用手动切换。

为什么用define会导致CORS错误 #

你之前尝试的define配置，是强制把变量注入到所有模块中，包括第三方依赖的.mjs文件。当这些依赖模块在浏览器中加载时，如果被注入的URL是跨域的，就会触发浏览器的CORS策略拦截，导致报错。Vite的环境变量机制只会把变量注入到你的业务代码里，不会影响第三方依赖，所以不会有这个问题。

额外优化：封装API请求工具 #

为了避免每次写API都重复拼接base URL，可以封装一个简单的请求工具：

// src/utils/api.js
const baseUrl = import.meta.env.VITE_API_BASE_URL;

export async function fetchApi(endpoint, options = {}) {
  const fullUrl = `${baseUrl}${endpoint}`;
  try {
    const response = await fetch(fullUrl, {
      ...options,
      headers: {
        'Content-Type': 'application/json',
        ...options.headers,
      },
    });
    if (!response.ok) throw new Error('Request failed');
    return await response.json();
  } catch (err) {
    console.error('API Error:', err);
    throw err;
  }
}

之后调用API就可以直接用：

import { fetchApi } from '@/utils/api';

const userData = await fetchApi('/api/user');

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