Vue 集成 Mockjs 0 安裝 1 創建 Mock 2 請求接口

0 安裝

npm install mockjs

1 創建 Mock

創建文件夾 src/mock, src/mock/json

創建 json 文件 src/mock/json/user.json

{
  "name": "Json",
  "age": 13
}

創建文件 src/mock/mock.js

import Mock from 'mockjs'


// 使用正則表達式匹配代參數的 get 請求  /user?xxxxxx
const user = require('./json/user.json')
Mock.mock(/\/user(|\?\S*)$/, 'get', user)
//Mock.mock('/user', user)

在 main.js 中引入 Mock

import Vue from 'vue'
import App from './App.vue'

// 引入 Mock
process.env.NODE_ENV === 'development' && require('./mock/mock')

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

上面設置完成後會自動攔截 mock.js 中設置的接口請求

2 請求接口

    axios
      .get("/user", {
        params: { userId: "12" }
      })
      .then(resp => {
        console.log("resp", resp);
      });