mock - 代理切换mockapi与接口api

mock - 代理切换mockapi与接口api

目的

通过修改 axios baseURL 切换mockapi与接口api

devServer: {
    port: 8092, //端口
    before:require('./mock/mock-server.js'),
    proxy: {
      '^/dev-api': {
        target: 'http://192.xxx.x.xx:3000/api/',
        changeOrigin: true,
        pathRewrite: {
          '^/dev-api': '',
        },
      },
      '^/mock-api': {
        target: 'http://localhost:8092/mock-api',
        changeOrigin: true,
        pathRewrite: { '^/mock-api': '' },
      },
    },
},

问题

baseURL = dev-api 时，接口请求超时

原因

devServer: {
    port: 8092, //端口
    // before:require('./mock/mock-server.js'), // 浏览器开发者工具`network`中看到`mockapi`请求数据
    // 此行导致
    proxy: {
      '^/dev-api': {
        target: 'http://192.168.x.xx:3000/api/',
        changeOrigin: true,
        pathRewrite: {
          '^/dev-api': '',
        },
      },
      '^/mock-api': {
        target: 'http://localhost:8092/mock-api',
        changeOrigin: true,
        pathRewrite: { '^/mock-api': '' },
      },
    },
},

注释掉此处，mockapi失效

mockapi与接口api 同时生效

在main.js引入mockapi

// main.js
if (
  process.env.NODE_ENV === 'development') {
  const { mockXHR } = require('../mock');
  mockXHR();
}
// vue.config.js
devServer: {
    port: 8092, //端口
    proxy: {
      '^/dev-api': {
        target: 'http://192.168.x.xx:3000/api/',
        changeOrigin: true,
        pathRewrite: {
          '^/dev-api': '',
        },
      },
      '^/mock-api': {
        target: 'http://localhost:8092/mock-api',
        changeOrigin: true,
        pathRewrite: { '^/mock-api': '' },
      },
    },
},

无法在浏览器开发者工具network中,看到mockapi请求数据