vue-cli实现异步请求返回mock模拟数据

> npm install -g @vue-cli

> vue create vue-mock

> npm install axios -S

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'

const vueApp = createApp(App)
vueApp.config.globalProperties.$axios = axios // vue3与vue2的区别，不再是通过prototype
vueApp.mount('#app')

> npm install mockjs -D

// mock/index.js
import Mock from 'mockjs'
Mock.mock('/url', 'get', (req, res) => {
  return Mock.mock({
    status: 200,
    req,
    res,
    data: '请求成功'
  })
})

// main.js
import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
import '../mock/index' // 引入mock路由拦截
const vueApp = createApp(App)
vueApp.config.globalProperties.$axios = axios
vueApp.mount('#app')

// helloWorld.vue
<template>
  <div>
    <button @click="getMockData">获取mock数据</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  methods: {
    getMockData() {
      this.$axios.get('/url').then(res => {
        console.log(res)
      })
    }
  }
}
</script>
<style scoped>

</style>

// vue.config.js
const Mock = require('mockjs')
module.exports = {
  //...
  devServer: {
    port: 8082,
    before: function(app, server) { // webpack4使用before，webpack使用setupMiddlewares
      app.get('/url', function(req, res) {
        res.json(Mock.mock({
          status: 200,
          data: '请求成功啦~'
        }));
      });
    }
  }
};

import { createApp } from 'vue'
import App from './App.vue'
import axios from 'axios'
// import '../mock/index' // 引入mock路由拦截
const vueApp = createApp(App)
vueApp.config.globalProperties.$axios = axios
vueApp.mount('#app')

> npm install chokidar -D

// mock/mock-server.js
const chokidar = require('chokidar')
const path = require('path')

const mockDir = path.join(process.cwd(), 'mock')

// 删除对应的接口路由缓存
function removeRegisterRoutes() {
  Object.keys(require.cache).forEach(i => {
    if (i.includes(mockDir)) {
      console.log(i)
      delete require.cache[require.resolve(i)]
    }
  })
}
// 注册接口路由，每增加一个路由，app._router.stack就增加一个堆栈
function registerRoutes(app){
  const mocks = require('./index') // 这里必须在函数内引用，否则无法实现热更新
  let count = 0
  for (const mock of mocks) {
    app[mock.method](mock.url, mock.response);
    count++
  }
  return {
    start: app._router.stack.length - count,
    count
  }
}

module.exports = (app) => {
  let { start, count } = registerRoutes(app)
  chokidar.watch(mockDir, {}).on('all', (event, path) => {
    if (event === 'change' || event === 'add') {
      app._router.stack.splice(start, count) // 先删除旧的api路由，再重新注册新的路由
      removeRegisterRoutes()
      const stack = registerRoutes(app)
      start = stack.start
      count = stack.count
    }
  })
}

// mock/index.jsconst Mock = require('mockjs')

const routers = [
  {
    url: '/url',
    method: 'get',
    response: (req, res) => {
      res.json(Mock.mock({
        status: 200,
        data: '请求成功~'
      }))
    }
  },
  {
    url: '/url/path',
    method: 'get',
    response: (req, res) => {
      res.json(Mock.mock({
        status: 200,
        data: '请求接口/url/path'
      }))
    }
  }
]
module.exports = routers

// vue.config.js// const Mock = require('mockjs')
module.exports = {
  //...
  devServer: {
    port: 8082,
    before: require('./mock/mock-server')
  }
};