vue-cli 中可以通過配置 proxyTable 解決開發環境的跨域問題，具體可以參考這篇文章：Vue-cli proxyTable 解決開發環境的跨域問題

如果后端接口尚未開發完成，前端開發一般使用mock數據。

mock方法有多種多樣，這里給出兩種：

方法一： 使用express搭建靜態服務

mock數據寫在json文件中，proxyTable 里將接口代理到具體mock數據json文件上。

具體方法：

創建 mock 文件夾

build/dev-server.js 中添加如下代碼

npm run dev 啟動后，可以通過 http://localhost:8080/mock/db.json 訪問數據，proxyTable對應設置代理即可（代理設置方法與解決跨域方法相似）

方法二 使用 JSON Server 搭建 Mock 服務器

JSON Server 是一個創建偽RESTful服務器的工具，具體使用方法可以看官方文檔，這里直接講在vue-cli 中的用法。

配置流程

全局安裝 $ npm install -g json-server

項目目錄下創建 mock 文件夾

mock 文件夾下添加 db.json 文件，內容如下

{ "posts": [ { "id": 1, "title": "json-server", "author": "typicode" } ], "comments": [ { "id": 1, "body": "some comment", "postId": 1 } ], "profile": { "name": "typicode" }}

package.json 添加命令

"mock": "json-server --watch mock/db.json", "mockdev": "npm run mock & npm run dev"

啟動 mock 服務器

$ npm run mock 命令 運行 mock server

訪問 http://localhost:3000/

發現 db.json 下第一級 json 對象被解析成為可訪問路徑

GET請求具體路徑 如：http://localhost:3000/posts 可獲取數據

faker.js 批量生成偽數據

如果需要大量的偽數據，手動構造比較費時費力，可以使用faker.js 批量生成。faker.js 的具體使用參見官方文檔，這里做一個示例。

$ cnpm install faker -G 全局安裝 faker

mock 目錄下創建 faker-data.js，內容如下

module.exports = function () { var faker = require("faker"); faker.locale = "zh_CN"; var _ = require("lodash"); return {  people: _.times(100, function (n) {   return {    id: n,    name: faker.name.findName(),    avatar: faker.internet.avatar()   }  }),  address: _.times(100, function (n) {   return {    id: faker.random.uuid(),    city: faker.address.city(),    county: faker.address.county()   }  }) }}

$ json-server mock/faker-data.js 在 json server 中使用 faker

請求 http://localhost:3000/address 可以獲取到隨機生成的100組偽數據

添加中間件

json server 使用 RESTful 架構，GET請求可以獲取數據，POST 請求則是添加數據。
在開發過程中，有時候想直接模擬獲取POST請求返回結果，可以添加 express 中間件 將POST請求轉為GET請求。

mock 目錄下創建 post-to-get.js，內容如下

module.exports = function (req, res, next) { req.method = "GET"; next();}

啟動命令添加運行中間件 --m mock/post-to-get.js


"mock": "json-server --watch mock/db.json --m mock/post-to-get.js",

重新啟動服務，POST請求就被轉換為GET請求了

其他需求也可以通過添加不同的中間件實現。

代理設置

在 config/index.js 的 proxyTable 將請求映射到 http://localhost:3000

代碼中添加請求以測試效果

$ npm run mockdev 啟動帶mock 數據的本地服務

結果如下：

整體代碼：https://github.com/carrotz/vue-cli-mock

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。