Vue3+vite+ts 项目使用mockjs

1、安装mockjs

npm i mockjs

2、安装vite-plugin-mock

npm i vite-plugin-mock -D

3、安装axios

npm i axios

4.在src目录下创建mock文件夹,在文件夹内创建login.ts等文件，并在文件夹内放置以下内容（注：URL要和真实请求地址保持一致）

login.ts的内容

import { MockMethod } from "vite-plugin-mock";
export default [
  {
    url: "/nss/mock-login", // 注意，这里只能是string格式
    method: "post",
    response: () => {
      return {
        menusList: [1,2,3,4,],
      };
    },
  },
] as MockMethod[]

5.在vite.config.ts进行个人配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'

import path from "path"

export default defineConfig({
  plugins:[
    vue(),
    viteMockServe({
      mockPath: "./src/mock/", // 指向mock下的文件
      localEnabled: true ,// 是否开启开发环境,
      enable: command === 'serve', // 是否使用mock接口；等于serve是开发阶段使用mock接口
    })
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  },
})

6.封装请求，创建axios文件夹，文件夹下创建index.ts文件，文件内放置以下内容

import axios from 'axios'
// 创建一个 axios 实例
const APICLice={
    Request(key,data,url){
       return new Promise((resolve,reject)=>{
        const serviceS = axios.create({
            baseURL: '/nss', // 所有的请求地址前缀部分
            timeout: 60000, // 请求超时时间毫秒
            withCredentials: true, // 异步请求携带cookie
            // headers: {
                // 设置后端需要的传参类型
                // 'Content-Type': 'application/json',
                // 'token': 'your token',
                // 'X-Requested-With': 'XMLHttpRequest',
            // },
        })
        // 添加请求拦截器
        serviceS.interceptors.request.use(
            function (config) {
                // 在发送请求之前做些什么
                return config
            },
            function (error) {
                // 对请求错误做些什么
                console.error('请求错误',error)
                return Promise.reject(error)
            }
        )
        // 添加响应拦截器
        serviceS.interceptors.response.use(
            function (response) {
                // 对响应数据做点什么
                resolve(response.data)
                return response.data
            },
            function (error) {
                return Promise.reject(error)
            }
        )
        return  serviceS({
         method: 'post',   
         url,
         data:data,
        })

       })
    }
}


export default APICLice

7.使用封装的请求：创建api文件夹，例：login.ts，文件夹下放置以下内容

// 导入axios实例
import request from '@/axios/index'
export function login(params){
 return request.Request('',params,'/mock-login')
}

8.页面内使用

<template>
  <div class="test">
    <h1>我是登录页面</h1>
    <button @click="increment">点击我开始登录了</button>
    <span v-show="showLogin">登录后我就开始显示了{{ dataList }}</span>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import { login } from '@/api/login/index'
let showLogin = ref(false)
let dataList = ref([])
function increment() {
  login({}).then((res) => {
    console.log('login', res)
    dataList.value = res
    showLogin.value = true
  })
}
</script>

<style>
</style>

效果如下：