原因

• 1、mockjs本地開(kāi)發(fā)的時(shí)候用還好，mock數(shù)據(jù)需要生產(chǎn)時(shí)候用就不大行了
• 2、mock的數(shù)據(jù)通過(guò)module.exports、export實(shí)現(xiàn)的時(shí)候，npm run build 生產(chǎn)打包的時(shí)候，這些假數(shù)據(jù)會(huì)打包進(jìn)app.js文件里面，導(dǎo)致文件大、首屏渲染慢；而且，在js文件里面mock的數(shù)據(jù)量超過(guò)webpack限制的時(shí)候，打包會(huì)失敗
• 3、遠(yuǎn)程mock數(shù)據(jù)的就不需要了。像 YApi、網(wǎng)易NEI

場(chǎng)景

• 1、做演示項(xiàng)目的時(shí)候，數(shù)據(jù)需要完全本地化實(shí)現(xiàn)
• 2、做演示項(xiàng)目的時(shí)候，要求數(shù)據(jù)可供業(yè)務(wù)人員修改
• 3、mock數(shù)據(jù)量1w+的時(shí)候（因?yàn)轫?xiàng)目用到的數(shù)據(jù)有6w+，十幾M的文件，需要用到此方法了）
• 4、做的項(xiàng)目，需要前端人員先定義接口數(shù)據(jù)，后臺(tái)人員配合傳。這時(shí)候定義好的數(shù)據(jù)格式直接扔給后臺(tái)人員就行了，特別是一些“查”，沒(méi)有“增刪改”的項(xiàng)目，前端寫(xiě)好后，基本不需要怎么修改了，挺方便的。
• 5、基于vue2 cli3項(xiàng)目

方法

vue cli3 的項(xiàng)目，打生產(chǎn)包的時(shí)候，public文件夾里面的文件，是不經(jīng)webpack編譯，直接復(fù)制到 publicPath設(shè)置的目錄下的，開(kāi)發(fā)時(shí)用到的json數(shù)據(jù)、圖片等資源文件，可以放到 public目錄里面。

mock資源

如下，準(zhǔn)備了一張圖片和一個(gè)json文件

table.json， cat.png

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

配置

涉及的文件如下（具體參考代碼）：

|-- src
    |-- .env.development    // 開(kāi)發(fā)環(huán)境配置，主要是配置服務(wù)器地址
    |-- .env.production        // 生產(chǎn)環(huán)境配置，主要是配置服務(wù)器地址
    |-- settings.js    // 一些全局配置，把publicPath的值設(shè)置在這里
    |-- utils
        |-- mock-request.js    // axios請(qǐng)求封裝
    |-- api
        |-- table.js    // 獲取table.json數(shù)據(jù)的請(qǐng)求封裝
    |-- views
        |-- mockDataTest    // 用來(lái)顯示請(qǐng)求結(jié)果
            |-- index.vue
            |-- index.scss
            |-- index.js
|-- public
    |-- data
        |-- table.json
    |-- images
        |-- cat.png
|-- vue.config.js    

vue.config.js + settings.js

先配置下訪問(wèn)公共路徑，例如，想在訪問(wèn)的時(shí)候地址加上dist路徑，可以在vue.config.js如下配置

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

為方便調(diào)用，記得這里要和settings.js里面的publicPath同步修改。

.env.development + .env.production

這里主要是配置下部署的服務(wù)器的地址，例如，開(kāi)發(fā)時(shí)，本地訪問(wèn)的地址是http://localhost:8081 定義一個(gè)參數(shù)，存放此地址，名字隨意

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

mock-request.js

這里主要是配置下axios的baseURL，直接讀取.env.development or .env.production里面配置的服務(wù)器地址就行，例如，

baseURL: process.env.VUE_APP_MOCK_URL

這里會(huì)自動(dòng)根據(jù)命令，讀取不同環(huán)境配置的服務(wù)器地址

table.js

這里是服務(wù)器請(qǐng)求相關(guān)的，.json文件的數(shù)據(jù)怎么請(qǐng)求獲取，如下所示

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'
  })
}

mockDataTest

這里主要是演示效果

• 1、調(diào)用接口，在界面上顯示table.json的數(shù)據(jù)
• 2、顯示放的圖片（也可以是其他資源，例如音樂(lè)、視頻）

具體看代碼了

效果如下

代碼

代碼，參考

總結(jié)

簡(jiǎn)單的實(shí)現(xiàn)了不用依賴(lài)后臺(tái)接口的mock數(shù)據(jù)請(qǐng)求。數(shù)據(jù)都存放在.json文件里面。這些放在public文件夾的文件，都不參與編譯，方便修改和替換。打包生產(chǎn)后，可以直接放靜態(tài)服務(wù)器運(yùn)行。

以上，因?yàn)橐粋€(gè)演示平臺(tái)需要，數(shù)據(jù)、圖片、視頻都有頻繁修改替換的可能，所以采用如此方式實(shí)現(xiàn)。

到此這篇關(guān)于vue本地模擬服務(wù)器請(qǐng)求mock數(shù)據(jù)的文章就介紹到這了,更多相關(guān)vue本地模擬服務(wù)器請(qǐng)求mock內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論