Vue中Axios请求自动添加publicPath前缀导致404问题求助

为什么会自动添加/dist前缀？ #

核心问题有两个：

1. Vue CLI环境变量命名规则遗漏：Vue CLI仅识别以VUE_APP_开头的环境变量，你定义的BASE_URL不会被自动注入项目，导致axios.defaults.baseURL实际为undefined。当Axios的baseURL未正确设置时，会默认使用当前页面的基准路径（即你配置的publicPath: '/dist/'）作为请求基础路径，最终拼接出/dist/api/v1/stop这种错误路径。
2. publicPath作用误解：publicPath仅用于指定Vue静态资源（JS、CSS、图片等）的加载路径，和API请求路径无直接关联，不要混淆两者配置逻辑。

解决方法 #

方法一：正确配置Axios的baseURL（推荐）

1. 调整环境变量命名：在Vue项目的.env系列文件中，将BASE_URL改为VUE_APP_BASE_URL，示例：
   • 生产环境（.env.production）：

     VUE_APP_BASE_URL=https://sub.domain.tld/
     

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

     VUE_APP_BASE_URL=/
     

2. 修改Axios配置代码：

   axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;
   

配置完成后，Axios会基于你设置的根路径发送请求，不再带上/dist前缀。

方法二：直接使用绝对路径请求

如果不想依赖环境变量，可直接在请求中写全绝对路径：

const response = await axios.post(`https://sub.domain.tld/api/v1/stop?id=${id}`);

但这种方式硬编码了域名，不利于多环境切换，仅适合临时测试场景。

方法三：确认FastAPI的静态资源挂载配置

确保FastAPI正确挂载Vue的dist目录，避免静态资源与API路由冲突：

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()

# 挂载Vue静态文件，访问路径为/dist
app.mount("/dist", StaticFiles(directory="dist"), name="dist")

# API路由示例
@app.post("/api/v1/stop")
async def handle_stop(id: str):
    # 你的业务逻辑
    return {"status": "success"}

额外注意 #

• 不要修改publicPath适配API请求，它仅负责静态资源加载路径，修改后会导致静态资源无法正常加载。
• 测试时可在浏览器开发者工具的「网络」面板查看Axios请求的Request URL，确认baseURL是否生效。

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