基于vue-element-admin项目进行开发,vue-element-admin本来是一个纯前端项目,使用mock进行接口模拟返回数据,不依赖后台服务.
刚开始开发时,后台同事提供了现成的用户登录认证相关的接口,但是没有业务相关的接口,所以前期可以调试登录相关的接口,但是业务接口还是需要mock来模拟
主要分为以下几步:
1.把mock改为真实接口
vue-element-admin本来使用的是mock,vue.config.js文件中devServer部分内容为:
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
before: require('./mock/mock-server.js')
},
如果想要使用真实接口,需要把相关内容修改为:
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
proxy: {
[process.env.VUE_APP_BASE_API]: {
target: 'http://10.130.224.171:80', // 测试
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
},
此时可以使用真实接口,但是使用不了mock,mock接口会报404
2.真实接口和mock共用
把vue.config.js文件中devServer部分修改为以下内容:
devServer: {
port: port,
open: true,
overlay: {
warnings: false,
errors: true
},
// after: require('./mock/mock-server.js'), // 此处有before和after两种方式,看了别人的文章刚开始发现before不生效,after生效,但改到最后发现这一句好像不需要,所以注掉了
proxy: {
// 更新-貌似这个也不需要,所以全部注释掉了,只留下一个真实接口的代理和main.js中引入的mock就好了
// [process.env.VUE_APP_BASE_API + 'vue-admin-template']: { // 'vue-admin-template'为vue-element-admin项目mock接口的公共前缀,如果这个公共前缀做了修改,此处也需要做相应修改
// target: `http://localhost:{port}`,
// changeOrigin: true,
// // pathRewrite: {
// // ['^' + process.env.VUE_APP_BASE_API]: '' // 只用mock时,使用url'/vue-admin-template/table/list'发送请求时,真实的url是'http://localhost:9528/dev-api/vue-admin-template/table/list',所以我认为此处不需要做url替换
// // }
// },
[process.env.VUE_APP_BASE_API]: {
target: 'http://10.130.224.171:80', // 测试
changeOrigin: true,
pathRewrite: {
['^' + process.env.VUE_APP_BASE_API]: ''
}
}
}
},
此时可以正常访问真实接口数据,mock接口数据返回431(Request Header Fields Too Large /请求头字段太大),不是404了
然后发现main.js中mock相关的部分添加了条件判断
if (process.env.NODE_ENV === 'production') {
const { mockXHR } = require('../mock')
mockXHR()
}
把条件判断去掉就好了,或者修改为如下:
if (process.env.NODE_ENV === 'development') {
const { mockXHR } = require('../mock')
mockXHR()
}
main.js文件中mock相关的代码在部署生产环境之前,务必要删掉!务必!!务必!!!
此外,由于真实接口的正常返回200,而vue.config.js中mock的正常返回码为20000,如果想要同时使用两种方案,需要以下两种方案二选一:
- 统一两种方案的code编码,我选择把mock的返回code统一为200
- 在
request.js文件中同时添加200和20000的放行条件
这样就可以同时使用真实接口和mock了,但是这样改完在控制台network中看不到mock的数据,小遗憾
