如何更改vue项目打包后如何更改axios封装的baseURL地址

在Vue项目中，如果你已经对axios进行了全局封装，并且这个封装在`src/api`这样的公共模块中，那么当你需要更改打包后的项目的API基础URL时，通常是在生产环境配置文件里做调整。例如，在Vue CLI 3或4中，你可以创建一个`.env.production.js`文件，用于存储环境变量，其中可以定义`VUE_APP_API_BASE_URL`这样的键值对：

// .env.production.js
module.exports = {
  VUE_APP_API_BASE_URL: 'https://new-api-url.com'
}

然后在你的axios实例初始化的地方，通过`process.env.VUE_APP_API_BASE_URL`来读取并设置新的URL，例如：

import axios from 'axios';
import env from '@/config/env';

const instance = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL || '', // 环境变量优先
  timeout: 5000,
  headers: {'X-Custom-Header': 'foobar'}
});

export default instance;

这样在打包部署时，`axios`会自动使用你在生产环境中设置的新URL。

相关问题

vue项目打包后如何更改axios封装的baseURL地址

在Vue项目中，当你已经将axios进行了封装，并且这个封装通常会设置一个全局的`baseURL`，如你在main.js或api文件中设置了这个变量，那么在项目打包之后，直接修改这个全局变量通常是不可行的，因为静态资源已经在构建阶段被打包到生产环境的静态目录下。

如果你想要动态地改变axios的`baseURL`，你可以考虑以下几种方式：

1. 使用环境变量：可以使用npm scripts中的`process.env`或者vue.config.js的`publicPath`属性来提供不同的baseURL，根据部署环境（如开发、测试、生产）加载不同的配置。

// 在vue.config.js中
const isProd = process.env.NODE_ENV === 'production'
export default {
  devServer: {
    publicPath: '/your-api-url/', // 开发环境API URL
  },
  build: {
    publicPath: '/api/', // 生产环境API URL
  },
}

然后在axios实例创建的时候，通过读取环境变量来设置baseURL。

import axios from 'axios';
import env from '@/env';

axios.defaults.baseURL = isProd ? env.productionApiUrl : env.developmentApiUrl;

2. 利用插件或中间件：在axios的拦截器中，可以根据请求的目标地址动态调整baseURL，例如使用axios-plugin-http-proxy。

3. 对象字面量创建实例：如果你的封装允许，每次发起请求时传入完整的url也行。

let axiosInstance = axios.create({
  baseURL: isProd ? '/api/' : '/your-api-url/'
});

// 然后在需要的地方使用
axiosInstance.get('/users');

vue3项目-axios封装

Vue 3中使用Axios进行网络请求的封装可以通过创建一个axios实例来实现。首先，安装axios库：

npm install axios

然后，在项目中创建一个`api`文件夹，用于存放API相关的文件。在该文件夹下创建一个`http.js`文件，用于封装axios。

// api/http.js
import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置接口的基础url
  timeout: 5000, // 设置请求超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前可以做一些操作，例如添加token等
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据进行处理，例如统一处理错误信息等
    return response.data;
  },
  (error) => {
    return Promise.reject(error);
  }
);

export default instance;

之后，在需要发送网络请求的地方，引入封装好的axios实例，并使用相应的HTTP方法进行请求。

例如，在一个`userService.js`文件中封装了用户相关的API：

// api/userService.js
import http from './http';

export function getUser(id) {
  return http.get(`/user/${id}`);
}

export function updateUser(id, data) {
  return http.patch(`/user/${id}`, data);
}

export function deleteUser(id) {
  return http.delete(`/user/${id}`);}

现在，你可以在Vue组件中调用这些API方法来发送网络请求了。