Vue-element-admin: 关于 4.2.1 版本 mock 逐步替换配置

[syx670326]

开发环境下如何同时使用mock和真实后端接口。如果有mock的话使用mock数据，其它调用真实后端接口。

官方文档 Mock Data - 修改没有说明真实接口地址怎么配置。
查看其它相关Issue,也没能找到解决方案。 #2570 #1997

[maoxuner]

我也遇到这个问题了，研究了两天，算是搞明白了。

---

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数据过渡到使用后台接口
   真实的api也可以当做一个mock server，通过配置proxy规则来实现
2. 启用纯前端mock
   修改xhr对象，拦截请求。符合mock规则的请求直接走mock

---

第一个方案配置起来比较麻烦，建议采用第二个方案。将main.js里的production改成development就好了

[leonineli]

我用proxy实现的mock和后台接口数据切换，配置如下：
1、修改vue.config.js，加入proxy代理，就是说/*.do的请求走后台接口调用
before: require('./mock/mock-server.js'),
proxy: {
'/*.do': {
target: 'http://127.0.0.1:8080'
}
}
后台接口需要配置成.do的url，spring boot配置如下：
@RequestMapping(value = "/getList.do", produces = {"application/json; charset=UTF-8"})
@ResponseBody
2、修改.env.development，把VUE_APP_BASE_API改成你的后台路径如/backgroud
VUE_APP_BASE_API = '/backgroud'
3、修改mock的url为.m如：
module.exports = [
{
url: '/getList.m',
type: 'get',
....
]
4、修改api的url为.m如：
export function getList(params) {
return request({
url: '/getList.m'
})
}
改成了.m后，走mock数据
如果要走后台接口，把api的url改成*.do就行，如下：
export function getList(params) {
return request({
url: '/getList.do'
})
}