vue從mock數據過渡到使用后台接口

一.說明

　　最近在搭建一個前端使用vue-element-admin，后端使用springBoot的項目。

　　我是從前端開始寫代碼的，所以一開始是使用mock模擬數據進行調試的。等到前端寫的差不多的時候，開始寫后端，然后邊寫接口邊對接前端。

　　這個時候就出現了一個問題：后台接口不是一次性寫完的，所以我需要同時使用mock數據和后台接口的數據。

二.解決方法

　　經過查找資料和自己調試，發現可以修改vue.config.js文件中的devServer的proxy配置來解決這個問題。

  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API+'/user/info']: {
        target: `http://localhost:${port}/mock`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
      [process.env.VUE_APP_BASE_API]:{
        target: process.env.BACKGROUND_APPLICATION_URL,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    after: require('./mock/mock-server.js')
  }

　　.env.development文件中，新增一個BACKGROUND_APPLICATION_URL變量

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/dev-api'

# vue-cli uses the VUE_CLI_BABEL_TRANSPILE_MODULES environment variable,
# to control whether the babel-plugin-dynamic-import-node plugin is enabled.
# It only does one thing by converting all import() to require().
# This configuration can significantly increase the speed of hot updates,
# when you have a large number of pages.
# Detail:  https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/babel-preset-app/index.js

VUE_CLI_BABEL_TRANSPILE_MODULES = true

# Background application url
BACKGROUND_APPLICATION_URL = 'http://localhost:8080'

　　主要的思路就通過代理，是'/user/info'的請求就轉發到mock中，其他請求就轉發到后台，這樣就可以同時使用mock和后台接口的數據了。

　　為什么把'/user/info'請求單獨出來，其實主要是后台暫時沒有寫用戶管理的部分，先寫了其他業務邏輯，但是頁面如果不登錄，是不能進入到后台管理的頁面的，於是做了這樣的“騷操作”。

　　這里的代理還可以寫多個，這就看具體情況具體的處理了。

　　主要的參考資料：https://webpack.docschina.org/configuration/dev-server/#devserver-proxy

三.注意點

　　1. vue-cli 3的項目配置使用vue.config.js文件，而不是使用webpack.config.js文件了，所以搜資料的時候要注意下版本和區別。

　　2. 到最后，把proxy和after整個注釋掉，就不會再使用mock數據了。