VUE 封装axios

	axios官方介绍：https://www.axios-http.cn/docs/intro
	node.js安装： npm install axios

封装一个配置文件
const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

新起了一个vue 项目

? Please pick a preset: Manually select features
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> 
? Check the features needed for your project: Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) 
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No
? Check the features needed for your project: Babel, Router, Vuex
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) 
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? No

#注册了settings
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import  settings from '@/settings'
const app = createApp(App)
app.use(store).use(router).mount('#app')
app.config.globalProperties.$settings = settings
settings 配置
// export default{
//     host:'localhost/'
// }

配置VUE

参考

https://blog.csdn.net/xiaojinlai123/article/details/90699565 Vue 环境变量和模式(设置通用baseUrl)

#tmd  从来没学过前端 先从newbing上抄一段，后面有需求再改
import axios from 'axios';

// 创建 Axios 实例
const request = axios.create({
    baseURL: process.env.baseUrl, // 这里填写你的API基础路径
    timeout: 10000, // 请求超时时间
    headers: {
        'Content-Type': 'application/json'
    }
});

// 请求拦截器
axiosInstance.interceptors.request.use(
    config => {
        // 在发送请求之前做些什么，例如添加token
        const token = localStorage.getItem('token');
        if (token) {
            config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
    },
    error => {
        // 对请求错误做些什么
        return Promise.reject(error);
    }
);

// 响应拦截器
axiosInstance.interceptors.response.use(
    response => response,
    error => {
        // 对响应错误做些什么
        return Promise.reject(error);
    }
);

export default axiosInstance;