为何Vite无法解析REST API URL的@api别名？

云上老周

2026-7-2

问题原因与解决方案

你遇到的问题本质是Vite的resolve.alias只负责解析模块导入路径，不会处理字符串字面量里的内容。你在axios.post('@api/login')里写的@api是普通字符串，Vite不会把它替换成/api，所以浏览器直接把它当作相对路径发起请求，就变成了http://localhost:5173/@api/login。

解决方案一：统一配置axios的baseURL

这是最简洁的方案，直接给axios设置基础路径，开发环境用代理的/api，生产环境用你配置的API地址：

在项目里新建一个src/utils/axios.js（或者直接在入口文件main.js里配置）：

import axios from 'axios'

// 根据环境切换基础路径
axios.defaults.baseURL = import.meta.env.MODE === 'development' 
  ? '/api' 
  : process.env.API_URL

export default axios

组件里导入配置好的axios，直接写接口路径即可：

import axios from '@/utils/axios'

let login = () => {
  axios.post('/login', {...})
    .then((resp) => {...})
    .catch((err) => console.log("Login failed:", err))
}

解决方案二：用环境变量定义API基础路径

如果需要在字符串里灵活引用，可以用Vite的环境变量来定义：

修改vite.config.js的define配置（或者直接在.env.development和.env.production文件里配置）：

export default defineConfig({
  // ...其他配置
  define: {
    // 开发环境基础路径
    'import.meta.env.VITE_API_BASE': JSON.stringify('/api'),
    // 生产环境可以单独配置，或者直接用你原来的process.env.API_URL
    'process.env.API_URL': JSON.stringify('http://apiUrlForProduction'),
  },
})

组件里使用环境变量拼接路径：

let login = () => {
  axios.post(`${import.meta.env.VITE_API_BASE}/login`, {...})
    .then((resp) => {...})
    .catch((err) => console.log("Login failed:", err))
}