vue本地模擬服務器怎么請求mock數據

本篇內容介紹了“vue本地模擬服務器怎么請求mock數據”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

原因

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

mockDataTest

這里主要是演示效果

• 1、調用接口，在界面上顯示table.json的數據

• 2、顯示放的圖片（也可以是其他資源，例如音樂、視頻）

效果如下

“vue本地模擬服務器怎么請求mock數據”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！