Vue3+Ts+Vite+element-plus项目——正式开发前的一些准备，封装，跨域

1、各种封装

1.1、分装baseURL

根目录下新建config/baseURL.ts 写入不同环境开发地址

export const baseURL_dev:string='http://localhost:5173/api/'
export const baseURL_pro:string='http://localhost:5173/api/pro'
export const baseURL_test:string='http://localhost:5173/api/test'

1.2、封装axios请求

根目录下新建config/request.ts写入

import axios from "axios";
import { baseURL_dev } from '@/config/baseURL'
//初始化一个axios对象
const instance = axios.create({
    baseURL: baseURL_dev,
    timeout: 1000,
    headers: {
        'X-Custom-Header': 'foobar'
    }
});
//get请求
export const $get = async (api: string, params: object = {}) => {
    const { data } = await instance.get(api, params)
    return data
}
//post请求
export const $post = async (api: string, params: object = {}) => {
    const { data } = await instance.post(api, params)
    return data
}

1.3、api接口

根目录下新建config/api.ts写入所有接口

export default {
    login: "login", // 登录接口
    logout:'logout',//退出登录```javascript
export default {
    login: "auth/login", // 登录接口
}
``````javascript
export default {
    login: "auth/login", // 登录接口
}
``````javascript
export default {
    login: "auth/login", // 登录接口
}

home: "home", // 主页

}

## 2、跨域问题的配置
### 2.1、项目根目录：vite.config.ts
```javascript
server:{
    open:true,//自动打开浏览器
    proxy:{
      '/api':{
        target:'你接口的ip或者域名',
        changeOrigin:true,
        rewrite(path){
          return path.replace(/^\/api/, '')
        }
      }
    }
}

2.2、开发基础地址

export  const  baseURL_dev:string='http://localhost:5173/api/'

###2.3、初始化axios

const instance = axios.create({
    baseURL: baseURL_dev,
    timeout: 1000,
    headers: {
        'X-Custom-Header': 'foobar'
    }
});

本作品采用《CC 协议》，转载必须注明作者和本文链接