创建vue3+TS+vite项目后，安装配置axios

简单记录一下创建项目常用的步骤

一、创建项目

1.创建项目，输入项目名，并选择vue   ->   TypeScript ，创建完成

npm creat vite@latest

二、安装配置axios

先安装axios

npm install axios

1.配置封装axios（request.ts文件）

//  配置封装axios 请求
//  引入axios 
import axios from "axios";
//引入element plus
import { ElMessage } from "element-plus";

// 跨域请求，允许保存cookie
axios.defaults.withCredentials = true;

const instance = axios.create({
    // 配置公共请求地址
    baseURL: '/api',
    // 配置请求时长 (当请求超过该时间,则自动中断请求)
    timeout: 50000,
    // 配置请求头(只针对post 请求有效)
    headers: { 'Content-Type': 'application/json' }

});

// 添加一个请求拦截器
//3.请求拦截    登陆放token的地方
instance.interceptors.request.use(config => {
    // config.headers['Authorization'] =getCookie('token')
    config.headers['Access-Control-Allow-Origin'] = '*'
    return config
})
// 添加一个响应拦截器
instance.interceptors.response.use(
    (res) => {
        if (res.status === 200 || res.data.code == 200) { 
            return res.data
        } else {
            ElMessage.error('请求失败')
        }
    },
    (err) => {
        //全局错误提示
        ElMessage.error(err.message)
        // if (err.response.status === 404) {
        //根据需求判断不同错误信息返回不同信息
        // }
        return Promise.reject(err);  //将错误消息挂到promise的失败函数上
    },

)
export default instance

2.配置公共请求地址（vite.config.ts）

import { defineConfig } from 'vite'
import { resolve } from 'path' 
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  server:{
    open:true, //自动打开
    proxy: {
      '/api': {
        target: 'http://172.16.0.21/', //跨域地址
        changeOrigin: true, //是否允许跨域
        rewrite: (path) => path.replace(/^\/api/, ""), //重写路径
      }
    },
  },
 //设置文件路径/src别名为@
  resolve:{
    alias:[
      {
        find: '@',
        replacement:resolve(__dirname,'./src')
      }
    ]
  },
})

3.定义接口请求（http.ts）

import instance from "@/utils/request.ts";
// 定义接口请求
// 登录
export const loginCode = (params: any) => {
    return instance({
        method: 'GET',
        url: '/auth/image_code',
        responseType: 'blob',  //用于数据是二进制数据，像是验证码、文件下载
        params
    })
}
// 登录
export const login = (data: any) => {
    return instance({
        method: 'POST',
        url: '/auth/login',
        data
    })
}

进行接口测试

注意：如果不配置node，console.log就不能用，可以安装第三方插件

npm i -D @types/node

<template>
    <div>
        登录
    </div>
</template>
<script setup lang="ts">
import {loginCode} from '@/utils/http.ts'
import {onMounted} from 'vue'
const getCodeImg=()=>{
      const params = {
        code_id: "8c97beec-4b39-420c-8ffb-89d9e9a18310",
      };
      loginCode(params)
        .then((res) => {
          console.log("成功", res);
        })
        .catch(() => {
          console.log("失败 ",err);
        });
    }
onMounted(()=>{
    getCodeImg()
})
</script>

<style lang="scss" scoped>

</style>