Vue项目上线后API请求路径变成本地路径的解决方案

问题分析

当Vue项目上线后API请求路径变成本地路径，通常是由于以下几种原因导致的：

1. 开发环境使用了代理(proxy)，但生产环境没有正确配置API基础路径
2. 前端代码中的API请求路径使用了相对路径或开发环境路径
3. 构建配置没有正确处理环境变量

解决方案

1. 配置环境变量

在项目根目录创建或修改以下文件：

.env.development (开发环境)

VUE_APP_API_BASE_URL=/api

.env.production (生产环境)

VUE_APP_API_BASE_URL=https://api.yourdomain.com

2. 使用axios实例配置基础URL

// src/utils/request.js
import axios from 'axios'

const service = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL,
  timeout: 5000
})

export default service

3. 在vue.config.js中配置生产环境路径

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://dev.api.yourdomain.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  // 其他配置...
}

4. 使用动态路径配置

在入口文件(main.js)或配置文件中：

// 根据环境动态设置API基础路径
const baseURL = process.env.NODE_ENV === 'production' 
  ? 'https://api.yourdomain.com' 
  : '/api'

Vue.prototype.$apiBaseUrl = baseURL

5. 检查nginx或其他服务器配置

确保生产服务器正确配置了API代理：

location /api {
  proxy_pass https://api.yourdomain.com;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}

验证步骤

1. 构建生产环境代码：npm run build
2. 检查dist目录中的配置文件是否正确
3. 部署后检查网络请求，确认API请求路径是否正确

常见问题排查

1. 环境变量未生效：确保变量名以VUE_APP_开头
2. 缓存问题：清除浏览器缓存或使用无痕模式测试
3. 构建配置问题：检查vue.config.js中的publicPath等配置
4. 跨域问题：确保服务器配置了正确的CORS头

通过以上方法，应该能解决Vue项目上线后API请求路径变成本地路径的问题。