VUE項目中同時使用API代理與MockJs

使用Mock的場景：

Mock 數據是前端開發過程中必不可少的一環，是分離前后端開發的關鍵鏈路。通過預先跟服務器端約定好的接口，模擬請求數據甚至邏輯，能夠讓前端開發更加獨立自主，不會被服務端的開發所阻塞。

使用API代理的場景：

如果你的前端應用和后端 API 服務器沒有運行在同一個主機上，你需要在開發環境下將 API 請求代理到 API 服務器。這個問題可以通過 vue.config.js 中的 devServer.proxy 選項來配置。

當以上兩種場景同時存在的配置案例，即后端有些API已開發完成，使用API代理通道，而后端未完成的API，使用Mock。若依的vue前端去除了mock，本文目的是把vue-element-admin中的mock加進來。

VUE-Element-Admin中改進的Mock-server

a參考：https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/essentials/mock-api.html#新方案

• 復制vue-element-admin中的mock目錄到自己的項目中，項目結構如下：

• 在.env.development文件中，配置以下環境變量：

VUE_APP_BASE_API = '/dev-api'
VUE_APP_MOCK_API = '/mock-api'

• vue.config.js配置

devServer: {
    host: '0.0.0.0',
    port: port,
    open: true,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:8080`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    before: require('./mock/mock-server.js'),
    disableHostCheck: true
  },

• 把utils/request.js復制一份，並將baseURL設置成process.env.VUE_APP_MOCK_API

• 對於需要Mock的API，導入request-mock:

• 到此get請求都沒有問題，但put及其他請求則會出現超時，把mock-server.js 修改一下，注釋app.use(bodyParser.json())

這樣，當后端API開發完成后，前端只需要將API文件中的request導入 '@urils/request'就可以了。