解决Vue+Express项目中Axios BaseURL多设备适配问题

核心问题分析 #

设置127.0.0.1:6060时，手机等设备会将该地址解析为自身本地回环，无法连接后端；设置服务器固定IP又需手动修改配置，本质是需要动态适配当前访问环境的后端地址。

方案1：让前后端同源（最推荐） #

将Vue打包后的静态文件交给Express托管，使前后端运行在同一IP+端口下，Axios无需指定具体IP，直接使用相对路径即可。

实现步骤： #

1. 打包Vue项目：

npm run build

2. 在Express中配置静态文件托管：

// Express后端代码
const express = require('express');
const path = require('path');
const app = express();

// 托管Vue打包后的dist目录
app.use(express.static(path.join(__dirname, 'dist')));

// 你的API路由
app.use('/api', require('./routes/api'));

// 监听所有网卡的6060端口，确保局域网设备能访问
app.listen(6060, '0.0.0.0', () => {
  console.log('Server running on http://0.0.0.0:6060');
});

3. 修改Axios配置：

import axios from 'axios';

// 用相对路径自动继承当前页面的域名/IP+端口
axios.defaults.baseURL = '/api';
// 修正拼写错误：Contect-Type → Content-Type
axios.defaults.headers = { 'Content-Type': 'multipart/form-data' };

此时手机访问服务器IP+6060即可打开前端，Axios请求会自动发送到同一地址的/api接口，无需手动修改baseURL。

方案2：动态获取当前页面origin（适合前后端分离部署） #

若前后端必须分开部署（如前端在8080端口、后端在6060端口），可通过浏览器window.location.origin动态获取前端访问地址，再替换为后端端口。

Axios配置修改： #

import axios from 'axios';

// 动态获取当前站点的协议+IP+端口，替换为后端端口6060
const frontendOrigin = window.location.origin;
const backendBaseURL = frontendOrigin.replace(/:\d+$/, ':6060');

axios.defaults.baseURL = backendBaseURL;
axios.defaults.headers = { 'Content-Type': 'multipart/form-data' };

该方案适用于前后端在同一局域网同一IP、仅端口不同的场景，手机访问前端地址时，Axios会自动适配后端端口。

方案3：通过环境变量自动切换（适合开发/生产环境区分） #

在Vue中配置不同环境的环境变量，打包时自动注入对应baseURL，无需手动修改配置文件。

实现步骤： #

1. 在Vue项目根目录创建环境配置文件：

• .env.development（本地开发用）：

VUE_APP_BASE_URL=http://127.0.0.1:6060

• .env.production（服务器部署用）：

VUE_APP_BASE_URL=http://192.168.1.100:6060

2. 修改Axios配置：

import axios from 'axios';

// 直接读取环境变量
axios.defaults.baseURL = process.env.VUE_APP_BASE_URL;
axios.defaults.headers = { 'Content-Type': 'multipart/form-data' };

本地开发执行npm run serve会自动加载开发环境变量，打包部署执行npm run build会自动加载生产环境变量，无需手动修改配置。

额外注意点 #

你的Axios headers中存在拼写错误：Contect-Type应改为Content-Type，该错误可能导致请求头不生效，建议一并修正。

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