不灭的焱

提问：以下代码中的的 import.meta 是什么东西？

const service = axios.create({
    baseURL: import.meta.env.VITE_API_URL
});

豆包回答：

一、import.meta 是什么？

import.meta 是 ES 模块（ES Module） 的一个内置元数据对象，是 ES2020 标准引入的特性，专门用于暴露当前模块的上下文信息（比如模块路径、环境变量等）。它不是全局变量，而是每个 ES 模块独有的，只能在 ES 模块文件（.js/.ts 且设置了 type="module"，或 Vite/Rollup 等构建工具处理的文件）中使用。

二、代码中 import.meta.env 的具体含义

你代码里的 import.meta.env.VITE_API_URL 是 Vite 构建工具对 import.meta 的扩展，核心作用是：

1. import.meta.env：Vite 会在构建 / 开发阶段，把项目中 .env 环境文件里的变量注入到这个对象中；
2. VITE_API_URL：是你自定义的环境变量（必须以 VITE_ 开头），Vite 只会暴露以 VITE_ 为前缀的变量（避免敏感信息泄露），最终会替换成具体的接口基础地址（比如 http://localhost:3000/api）。

三、完整示例（帮你理解用法）

1. 先创建环境文件（项目根目录）

比如创建 .env.development（开发环境）：

# 注意变量名必须以 VITE_ 开头
VITE_API_URL = 'http://localhost:3000/api'

创建 .env.production（生产环境）：

VITE_API_URL = 'https://prod.example.com/api'

2. 你的 axios 配置代码（完整可运行版）

import axios from 'axios';

// 创建 axios 实例，通过 import.meta.env 获取 Vite 注入的环境变量
const service = axios.create({
  // 读取 VITE_API_URL 作为接口基础地址
  baseURL: import.meta.env.VITE_API_URL,
  // 可选：设置请求超时时间
  timeout: 5000
});

// 示例：使用 service 发送请求
service.get('/user/list')
  .then(res => console.log(res))
  .catch(err => console.error(err));

export default service;

四、关键补充说明

1. 使用前提：只有在 Vite 构建的项目（Vue3/Vite、React/Vite 等）中才能这样用，Webpack 项目对应的是 process.env（比如 process.env.REACT_APP_API_URL）；
2. 环境变量生效规则：
   • 开发环境（npm run dev）会加载 .env.development；
   • 生产环境（npm run build）会加载 .env.production；
   • .env 文件是通用配置，优先级低于环境专属文件；
3. 为什么要加 VITE_ 前缀：Vite 为了安全，默认只暴露以 VITE_ 开头的变量，避免把数据库密码、密钥等敏感信息意外暴露到前端。

总结

1. import.meta 是 ES 模块的内置元数据对象，提供模块上下文信息；
2. import.meta.env 是 Vite 对 import.meta 的扩展，用于读取前端环境变量；
3. 你代码中的 import.meta.env.VITE_API_URL 本质是读取 Vite 注入的、以 VITE_ 开头的接口基础地址，实现开发 / 生产环境的地址区分。