vue-element-admin从mock数据过渡到使用后台接口

时间：2019-06-21 12:24:10 阅读：1728 评论：0 收藏：0 [点我收藏+]

一.说明

　　最近在搭建一个前端使用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.VUE_APP_BASE_API,
        changeOrigin: true,
        pathRewrite: {
          [‘^‘ + process.env.VUE_APP_BASE_API]: ‘‘
        }
      }
    },
    after: require(‘./mock/mock-server.js‘)
  }