Mock.js 是一個模擬數據生成器，利用它，可以攔截ajax請求，直接模擬返回數據，這樣前后端只要約定好數據格式，前端就不需要依賴后端的接口，可以直接使用模擬的數據了。
網上介紹mock的教程也較多，不過大多數看的比較模糊。其實使用起來非常簡單，這里介紹在Vue工程中使用Mockjs，並且實現開發和生產配置化。
一、安裝
cnpm install --save-dev mockjs
二、引入
為了只在開發環境使用mock，而打包到生產環境時自動不使用mock，我們可以在env中做一個配置
//dev.env
module.exports = merge(prodEnv, { NODE_ENV: '"development"', MOCK: 'true', }) //prod.env
module.exports = { NODE_ENV: '"production"', MOCK: 'false', }
然后再main.js里面引入mockjs
process.env.MOCK && require('@/mock') //表示配置MOCK為true的時候，才引入mock，所以生產環境的時候就不引入mock了
三、目錄和文件創建
在src目錄下創建mock目錄，添加index.js文件，這里建議給每類api使用單獨的mock文件。例如下面一個api文件對應一個mock文件
mock/index.js
//將所有的mock文件導入
require('./inspection') // 在這里可以做一些通用的配置
const Mock = require("mockjs") // 設置所有ajax請求的超時時間，模擬網絡傳輸耗時
Mock.setup({ timeout: 0-300 })
四、攔截ajax請求，配置mock的數據
const Mock = require("mockjs") const Random = Mock.Random; Mock.mock('/api/load','get',{ 'xData|100':['@datetime'], 'series|2':[{ 'name':'@NAME', 'type':'line', 'smooth':true, 'data|100':['@integer(1,600)'] }] })
攔截ajax請求主要可以使用Mock中的兩個方法：
Mock.mock( rurl, rtype, template )
Mock.mock( rurl, rtype, function( options ) )
rurl：表示需要攔截的 URL，可以是 URL 字符串或 URL 正則。（在vue 工程中，建議將api的url全部放在apipath中統一管理，然后在Mock中使用與發請求的時候使用的同一個引用）
rtype：表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。
template：表示數據模板，可以是對象或字符串。如果需要要把數據寫死，可以直接寫一個普通的對象。如果要讓Mock隨機生成，可以根據Mock模板的規則自定義。例如：
{ 'data|1-10':[{}] } 表示生成生成包含 1到10個空對象的數據 '@EMAIL' 表示隨機生成一個email地址 '@CNAME' 表示隨機生成一個中文人名
再就是函數，比如下面這樣
Mock.mock('/api/redo','get',function(options){ let series=[]; for(let n=1;n<18;n++){ let _obj={}; _obj.name = '05-' + (n <= 9 ? '0' + n : n); _obj.type = 'line'; _obj.data=[]; for(let i=0;i<24;i++){ let _d = Random.integer(1,10) * (i%2 == 0 ? 10 : 90); _obj.data.push(_d); } series.push(_obj); } return series; })
到此基本應用就可以了，更詳細的使用，請看官方文檔。
五、Mock 無法攔截 帶參數的 GET 請求
解決：后來將路徑改成正則就好
//api //獲取健康模型數據 export const getRadarDataApi = (id) => ajax({url:BASEURL + 'radar/' + id}) //mock Mock.mock(/\/api\/radar/,'get',{ 'radar|5':['@integer(0, 100)'] })