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

说明:

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

由于vue-element-admin使用的是mock的模拟数据跑起来的项目,所以在开发过程中难免会遇到mock和真实数据之间的混合使用,既要原先的项目跑起来,也要真实接口数据可以使用

解决方案:

在github上vue-element-admin有issues这个就方便多了,我想上面肯定有人也遇到我这种问题,就直接在上面搜索问题,结果还真有,下,我贴一段上面的大佬对于这个问题的描述:

mock-server就是一个web server，默认监听在9528端口（可能是vue-cli-service反代理把请求转发给mock-server的），并没有改写xhr对象的请求方法，因此不会对请求作拦截。可以帮它当做一个单独的web server，只不过它会随着vue-cli-service启动。

假定你的环境变量VUE_APP_BASE_API的值是http://foo.bar.com/api，如果是默认的mock数据的话，那么mock-server生成的资源会是这样的格式http://localhost:9528/http://foo.bar.com/api/vue-admin-template/user/login。参考mock-server.js

以上说到，mock-server不会拦截请求，实际的请求还是会发给http://foo.bar.com/api/vue-admin-template/user/login，因此是不能通过mock-server实现这个需求的。
PS：当VUE_APP_BASE_API是/dev-api这样不包含协议和主机名的值时，请求发给同域的web server了，即http://localhost:9528，刚好是mock-server的服务。

要实现同时使用mock和真实api，有两种方案：

1. 多个server，参考：vue从mock数据过渡到使用后台接口   https://www.cnblogs.com/xiayuscc/p/11063590.html
   真实的api也可以当做一个mock server，通过配置proxy规则来实现
2. 启用纯前端mock
   修改xhr对象，拦截请求。符合mock规则的请求直接走mock

 

两个方法我都实验了一下,原理上都可行,问题在于什么时候走真实数据,什么时候走mock数据,第一个方法:他采用的是辨别mock接口的url,我好像怎么用都不行,最后结果是mock和接口都调不通了,不知道哪里出的问题,第二个方法:启用纯前端的mock,然后我就去了vue-element-admin的官方文档上研究了一下,感觉和方法一差不多,一样的结果.mock和接口都跑不了,

后来没办法,疯狂百度看各路大佬的解决方案,出奇的一致百分之90都是百度到这种方法,剩下百分之10什么妖魔鬼怪都出来了0.0

最后总结没办法一点一点尝试,发现是before属性和after属性搞的鬼,我最后的方案是采用的before,在默认情况下使用before调用mock数据,如果找不到数据时跑接口数据代码如下(打双引号的都是前人大佬的方法,弟弟跑不通,索性留着以后还可以再研究0.0)

 

devServer: {

    port: port, // 访问端口号

    open: true, // 编译完成打开网页

    host: '0.0.0.0', // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问

    overlay: {

      warnings: false,

      errors: true

    },

    before: require('./mock/mock-server.js'),

    proxy: {

      // change xxx-api/login => mock/login

      // detail: https://cli.vuejs.org/config/#devserver-proxy

      // [process.env.VUE_APP_BASE_API + '/user/login']: {

      //   target: `http://localhost:${port}/`,

      //   changeOrigin: true,

      //   pathRewrite: {

      //     ['^' + process.env.VUE_APP_BASE_API]: ''

      //   }

      // },

      // change xxx-api/login => mock/login

      // detail: https://cli.vuejs.org/config/#devserver-proxy

      [process.env.VUE_APP_BASE_API]: {

        // target: `http://localhost:${port}/mock`,

        target: 'http://192.168.1.117:9090/',

        changeOrigin: true,

        pathRewrite: {

          ['^' + process.env.VUE_APP_BASE_API]: ''

        }

      }

    }

    // after: require('./mock/mock-server.js')

    // before: require('./mock/mock-server.js')

  },

 

总结下来就是vue配置真难!!!!

 

愿所有前端的头发都被善待