使用express配合rap配置vue本地開發環境

前言

　　近期在作 vue 單頁項目，採用的開發方式是先後端分離的模式。後端只提供接口，前端負責數據獲取與展示，接口文檔寫在 rap 上，它是一個可視化接口管理工具 經過分析接口結構，動態生成模擬數據，校驗真實接口正確性， 圍繞接口定義，經過一系列自動化工具提高咱們的協做效率。
　　基礎的vue項目結構是用 vue-cli 腳手架生成的，在 config 文件夾中新增了一個請求代理配置文件 proxy-config.js 。
　　在 rep_server 文件夾的 config-rap.js 文件中配置項目ID => projectId,rap項目ID獲取以下：

技術點

　　node + express + vue，項目地址，歡迎star

整體描述

• 接口統一管理
• 支持跨域訪問
• mock 數據與測試環境分離

項目運行

　　git clone https://github.com/Guoch0526/vue-mock-demo.git

　　cd vue-mock-demo

　　npm install

　　// 安裝好依賴以後,找到 rap_server 文件夾中的 config-rap.js, 替換爲你的rap項目基本配置

　　// 接口統一寫在 src/api-irls/index.js 中, 最後：

　　npm run start複製代碼

• 以後在命令行工具中你會看到:
  

  

• 若是瀏覽器顯示：
  

  

那就說明你已經成功獲取到數據了

項目整體結構

├── build                                       // webpack配置文件
├── config                                      // 項目(代理)配置
├── rap_server                                  // rap服務器配置
├── src                                         // 資源目錄
│   ├── api-urls                                // 接口配置
│   ├── assets                                  // 公共資源
│   ├── components                              // 組件
│   ├── router                                  // 頁面路由
│   ├── App.vue                                 // 頁面入口文件
│   ├── main.js                                 // 程序主入口
├── package.json                                // 包
├── index.html                                  // 入口html文件複製代碼