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数据了。