Vue项目部署后API请求路径异常解决方案

问题分析

在Vue项目部署后出现API请求路径异常，通常是因为开发环境和生产环境的API基础路径不同导致的。本地开发时可能使用相对路径或本地服务器地址，而部署后需要指向生产环境的API服务器。

解决方案

1. 使用环境变量配置

Vue CLI项目支持环境变量配置：

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

   • .env.development (开发环境)
   • .env.production (生产环境)

2. 在文件中配置API基础路径：

   # .env.development
   VUE_APP_API_BASE_URL=http://localhost:3000/api
   
   # .env.production
   VUE_APP_API_BASE_URL=https://api.yourdomain.com/api
   

3. 在代码中使用：

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

2. 动态配置API路径

对于需要更灵活配置的场景：

1. 在public文件夹下创建config.json：

   {
    "apiBaseUrl": "https://api.yourdomain.com/api"
   }
   

2. 在应用启动时加载配置：

   // main.js
   import axios from 'axios';
   
   axios.get('/config.json').then(response => {
    axios.defaults.baseURL = response.data.apiBaseUrl;
    new Vue({
      // ... Vue实例
    }).$mount('#app');
   });
   

3. 使用代理配置（开发环境）

对于开发环境，可以在vue.config.js中配置代理：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

4. 使用Axios实例

创建可配置的Axios实例：

// src/api/index.js
import axios from 'axios';

const api = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL || '/api',
  timeout: 10000
});

export default api;

部署建议

1. Docker部署：在Docker构建时注入环境变量
2. CI/CD流程：在构建阶段设置正确的环境变量
3. Nginx配置：可以添加反向代理规则处理API请求

常见问题排查

1. 检查浏览器开发者工具中的Network面板，查看实际请求的URL
2. 确保生产环境构建时使用了正确的环境文件
3. 检查服务器是否配置了CORS头，允许前端域名访问API

通过以上方法，您应该能够解决Vue项目部署后的API路径指向问题。