Mock.js是一個模擬數據的生成器，用來幫助前端調試開發、進行前後端的原型分離以及用來提高自動化測試效率。
Mock.js因爲兩個重要的特性風靡前端:
數據類型豐富
支持生成隨機的文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等。
攔截Ajax請求
不需要修改既有代碼，就可以攔截Ajax請求，返回模擬的響應數據。
Mock.js使用步驟
1 安裝mockjs依賴
npm install mockjs -D #只在開發環境使用
2 引入
爲了只在開發環境使用mock，而打包到生產環境時自動不使用mock，我們可以在env中做一個配置
(1)dev.env 開發環境
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
MOCK: 'true'
})
(2)prod.env 生產環境
module.exports = {
NODE_ENV: '"production"',
MOCK: 'false'
}
(3)main.js
//開發環境下才會引入mockjs
process.env.MOCK && require('@/mock')
注1：import是ES6標準中的模塊化解決方案，require是node中遵循CommonJS規範的模塊化解決方案
後者支持動態引入，也就是require(${path}/xx.js)
3 目錄和文件創建
在src目錄下創建mock目錄，定義mock主文件index.js，並在該文件中定義攔截路由配置，
/src/mock/index.js
導入公共模塊及mockjs全局設置
import Mock from 'mockjs' //引入mockjs，npm已安裝
//全局設置：設置所有ajax請求的超時時間，模擬網絡傳輸耗時
Mock.setup({
// timeout: 400 //延時400s請求到數據
timeout: 200 - 400 //延時200-400s請求到數據
})
注1：index.js文件的作用很顯然,就是將分散的xxx-mock文件集合起來.後面再添加新的mock文件,都需要在這裏引入
4 爲每個*.vue定義單獨的xxx-mock.js文件
/src/mock/json/login-mock.js
定義返回的數據類型
const logininfo={
"username":'admin',
"uid":'1',
"success|1":true,
"msg|3-6":'ok'
}
export default logininfo
注1：可以添加自定義的json數據
注2：還可以通過mockjs的模板生成隨機數據
5 在index.js中導入xxx-mock.js，並添加攔截路由配置
import loginInfo from '@/mock/json/login-mock.js'
Mock.mock(url, "post", {...}) 這裏的{就是上面引入的loginInfo}
注：如果項目上線後，不需要mock.js，就將main.js中的 process.env.MOCK && require('@/mock') 註釋或刪除