最近在開發專案的時候，需要用到mockjs這個包來實現前端本地資料的模擬，下面我就來說一下具體步驟：

前言

uni-app將自己的配置融合到了vue.config.js中，所以需要自己配置，需要在package.json的同級目錄下新建一個vue.config.js；ajax請求的路由，因為這個路由我們希望拿到模擬資料，所以用webpack的devserve來攔截。攔截之後通過mockjs，由它來生成模擬資料，然後返回模擬值。

步驟

在vue.config.js中加入下面程式碼：

const Mock = require('./mock/index.js');
module.exports = {
 chainWebpack: (config) => {  
  config.resolve.alias
  .set( '@',resolve(__dirname,'/'))//設定@為src目錄的別名)
 },css: {
  ....
  }

 },devServer: {
  contentBase: path.join(__dirname,'mock'),compress: true,port: 8080,overlay: {
   warnings: false,errors: true
  },before(app){
   Mock(app)
  }
}
};

devserver的配置中的before配置項是攔截路由請求。我們把全部交給Mock(app)處理；然後開啟mock/index.js寫入如下程式碼：

const addressesMock = require('./addresses');
const attendanceMock = require('./attendance');
const attendanceListMock = require('./attendance-list');
....
function Mock(app) {
 addressesMock(app)
 attendanceMock(app)
 attendanceListMock(app)
 .....
}

module.exports = Mock;

開啟addresses寫入你需要mock的資料就ok啦

var Mockjs = require('mockjs')
const { Random }= Mockjs;
const phonePrefix = ['132','135','189']
const index = Math.floor(Math.random() * phonePrefix.length)
var phone = phonePrefix[index] + Mockjs.mock(/\d{8}/)
const addressesMock = function (app) {
  app.get('/api3/addresses',function(req,res) {
   var data = Mockjs.mock({
    // 屬性 list 的值是一個數組，其中元素的數量從 1 到 10 個都有可能，隨機
    'list|1-10': [{
     'id|+1': 0,"accept_name": Random.cname(),"mobile": phone,"province_name": Random.province(),"area": Mockjs.mock(/\d{6}/),"city": Mockjs.mock(/\d{6}/),"sex": parseInt(Random.boolean()),"district": {
      "districts": Random.province()+Random.city()+Random.county(),"area": Random.county(),"city": Random.city(),"province": Random.province()
     },"street": "有一間公寓八棟","inner": false,"lat": "","door_number": "AB1234","is_default": parseInt(Random.boolean()),"province": Mockjs.mock(/\d{6}/),"area_name":Random.county(),"city_name": Random.city(),"poiname": ""
    }]
   })
   res.json(data);
  })
 }
 
module.exports = addressesMock;

在需要介面的地方之間用 就能得到相應資料了

this.$ajax.get('/api3/addresses').then(res => { // 呼叫介面
      })

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。