vue cli3 本地資料模擬後台介面

vue-cli3 本地資料模擬後台介面

原理：將本地的json資料在前端模擬為後台介面，然後呼叫介面，完成前端操作。在後台接通後可以直接在api配置檔案中修改路徑，完成前後臺對接。

配置：1.檔案目錄

2. 安裝express

npm i express

3.1配置express

const express = require('express')

let apiroutes =express.router()
3.2配置介面
/*基年資料列表介面 
*/        res.json(require('./static/mock/backlist.json'))
})/*業務圖層資料介面 
*/        res.json(require('./static/mock/geojson.json'))
})/*基年資料介面 
*/        res.json(require('./static/mock/basedata.json'))})}

4.從新啟動專案，即可訪問介面

5.之後就是正常的前端開發，在api中配置介面路徑，在頁面呼叫即可。

vue cli3讀取本地json檔案

一般前端mock資料或者資料量過大且不需要考慮安全問題，或者資料穩定不需要常做變更的場景，這些資料可以由前端進行維護，將資料轉為json檔案放到前端本地進行讀取。由於公司業務，需要在進入頁面的時候，一次獲取15萬條資料用於輸入框的模糊搜尋，但是這樣前端一次性獲取如此大量的資料，直接就導致了頁面崩潰，...

vue cli3的打包並在本地檢視

1.vue cli3沒有vue.config.js檔案，在根目錄下建乙個vue.config.js檔案 3.vue cli3.3版本前的打包命令 vue cli3.3版本之後 我用3.3之前的命令打包一直報這種錯誤 後來用3.3版本之後那種命令打包成功 4.打包完成後的注意事項 打包後我們可以看到d...

vue cli3 使用手機訪問本地專案

這裡只寫一下怎麼使用手機訪問vue的本地專案,多的我就不贅述了 第一步win r 開啟cmd 輸入 ipconfig 檢視一下本機網路ip,如下圖 可以看到本機的ip是 192.168.1.107 第二步 開啟 vue.config.js這個檔案,新增devserver這個物件 部分配置引數如下 配...