vue本地模擬伺服器請求mock資料的方法詳解

2022-03-19 16:00:15

原因

1、mockjs本地開發的時候用還好，mock資料需要生產時候用就不大行了
2、mock的資料通過module.exports、export實現的時候，npm run build 生產打包的時候，這些假資料會打包進app.js檔案裡面，導致檔案大、首屏渲染慢；而且，在js檔案裡面mock的資料量超過webpack限制的時候，打包會失敗
3、遠端mock資料的就不需要了。像 YApi、網易NEI

場景

1、做演示專案的時候，資料需要完全在地化實現
2、做演示專案的時候，要求資料可供業務人員修改
3、mock資料量1w+的時候（因為專案用到的資料有6w+，十幾M的檔案，需要用到此方法了）
4、做的專案，需要前端人員先定義介面資料，後臺人員配合傳。這時候定義好的資料格式直接扔給後臺人員就行了，特別是一些“查”，沒有“增刪改”的專案，前端寫好後，基本不需要怎麼修改了，挺方便的。
5、基於vue2 cli3專案

方法

vue cli3 的專案，打生產包的時候，public資料夾裡面的檔案，是不經webpack編譯，直接複製到 publicPath設定的目錄下的，開發時用到的json資料、圖片等資原始檔，可以放到 public目錄裡面。

mock資源

如下，準備了一張圖片和一個json檔案

table.json， cat.png

|-- src
|-- public
    |-- data
        |-- table.json
    |-- images
        |-- cat.png

設定

涉及的檔案如下（具體參考程式碼）：

|-- src
    |-- .env.development    // 開發環境設定，主要是設定伺服器地址
    |-- .env.production        // 生產環境設定，主要是設定伺服器地址
    |-- settings.js    // 一些全域性設定，把publicPath的值設定在這裡
    |-- utils
        |-- mock-request.js    // axios請求封裝
    |-- api
        |-- table.js    // 獲取table.json資料的請求封裝
    |-- views
        |-- mockDataTest    // 用來顯示請求結果
            |-- index.vue
            |-- index.scss
            |-- index.js
|-- public
    |-- data
        |-- table.json
    |-- images
        |-- cat.png
|-- vue.config.js

vue.config.js + settings.js

先設定下存取公共路徑，例如，想在存取的時候地址加上dist路徑，可以在vue.config.js如下設定

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/' : '/dist',
}

為方便呼叫，記得這裡要和settings.js裡面的publicPath同步修改。

.env.development + .env.production

這裡主要是設定下部署的伺服器的地址，例如，開發時，本地存取的地址是http://localhost:8081 定義一個引數，存放此地址，名字隨意

VUE_APP_MOCK_URL = 'http://localhost:8081/'

mock-request.js

這裡主要是設定下axios的baseURL，直接讀取.env.development or .env.production裡面設定的伺服器地址就行，例如，

baseURL: process.env.VUE_APP_MOCK_URL

這裡會自動根據命令，讀取不同環境設定的伺服器地址

table.js

這裡是伺服器請求相關的，.json檔案的資料怎麼請求獲取，如下所示

import mrequest from '@/utils/mock-request'
import defaultSettings from '@/settings'
const { publicPath } = defaultSettings

export const tableData = () => {
  return mrequest({
    url: publicPath + `/data/table.json`,
    method: 'get'
  })
}