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
请求数据
Lee2