Vue3+mock+axios

axios官网：www.axios-http.cn/docs/intro

mockjs官网：mockjs.com/

vite-plugin-mock官方文档：github.com/vbenjs/vite…

打包问题解决参考文档：blog.csdn.net/sinat_35082…

其他思路补充参考文档：www.jianshu.com/p/8ce94077a…

1、安装axios：npm install axios

2、axios二次封装：

//引入axios
import axios from 'axios'
//创建axios实例
const api = axios.create({
    baseURL:"",//基准地址
    timeout:5000,//超时时间
})
//添加请求拦截器
api.interceptors.request.use((config)=>{
    //在发送请求之前做些什么
    return config
},(error)=>{
    //对请求错误做些什么
    return Promise.reject(error)
})

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

//导出
export default api

3、安装mockjs和vite-plugin-mock插件

npm i mockjs vite-plugin-mock --save-dev

4、src下创建文件夹mock/api,创建toLogin.ts文件

//toLogin.ts
import type { MockMethod } from 'vite-plugin-mock'

export default [
  {
    url: '/api/toLogin', // 注意，这里只能是string格式
    method: 'get',
    response: () => {
      return {
        code: 200,
        status: "success",
        data: {
          person_id: 123456,
          person_name: "管理员"
        }
      }
    }
  }
] as MockMethod[] // 这里其实就是定义数据格式的，不了解的同学可以参考typescript的官方文档

5、vite.config.ts配置

 import {viteMockServe} from 'vite-plugin-mock'
 plugins: [
    vue(),
    viteMockServe({
      // supportTs:false,
      // logger:false,
      mockPath:"./src/mock/api",//解析路径
      localEnabled:true，//设置为false,禁用mock
    })
  ],

6、页面引用

 //表单提交
    const submitForm = async (formEl: FormInstance | undefined) => {
        if (!formEl) return
        await formEl.validate((valid, fields) => {
            if (valid) {
                console.log("submit")
                //登录
                doLogin();
            } else {
                console.log("error submit!", fields)
            }
        })
    }

    const doLogin = async()=>{
        const res = await axios.get("/api/toLogin")
        console.log("res:",res)
    }