vue-admin 如何让mock和请求后台接口同时存在(登录用的mock数据。页面是后台请求数据)

开发环境走mock-server

在开发环境中,vue-config-js我们配置代理的时候开了一个叫

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

所以会走mock-server
但是当我们请求后台的时候我们封装的request.js的时候

 baseURL: process.env.VUE_APP_BASE_API,

然后我们把.env.development,.env.staging base api都改成了后台请求的接口,后台已经解决了跨域

VUE_APP_BASE_API = 'http://10.10.20.103:8083'

但是当我们登录的时候走的是vue-admin自动的登录方法走mock-server,就会报跨域错误,其他页面可以正常访问

生产及予发布环境是走mock.js 环境

所以在予发布环境中可以正常登录,并获取页面数据
是在

解决方法 main.js中加一个process.env.NODE_ENV === ‘development’,且注释掉

vue-config-js

//before: require('./mock/mock-server.js')或
//bafter: require('./mock/mock-server.js')
```js
if (process.env.NODE_ENV === "production"||process.env.NODE_ENV === 'development') {
  const { mockXHR } = require("../mock");
  mockXHR();
}
要去除vue-admin中的mock功能,你需要进行以下步骤: 1. 打开vue.config.js文件,并注释掉devServer下的before选项。具体操作是在before选项的前面加上双斜杠注释符(//),即将`// before: require('./mock/mock-server.js')`改为`// before: require('./mock/mock-server.js')`。 2. 打开/src/main.js文件,并注释掉使用MockJs的代码块。具体操作是在if语句的前面加上双斜杠注释符(//),即将 ```javascript // if (process.env.NODE_ENV === 'production') { // const { mockXHR } = require('../mock') // mockXHR() // } ``` 改为 ```javascript // if (process.env.NODE_ENV === 'production') { // const { mockXHR } = require('../mock') // mockXHR() // } ``` 3. 打开.env.development文件,并将VUE_APP_BASE_API的值修改为你的后台接口地址。具体操作是将`VUE_APP_BASE_API = 'http://localhost:12001'`改为你的后台接口地址,例如`VUE_APP_BASE_API = 'http://example.com/api'`。 4. 最后,重新启动项目即可。现在,你的vue-admin项目中的mock功能已经被去除了。 注意,以上步骤是为了去除vue-admin中的mock功能,如果你还有其他需求,请提供更多详细信息,我会尽力提供帮助。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vue学习第一天(取消mock,连接服务端)](https://blog.csdn.net/qq_39580561/article/details/108797287)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [vue-element-admin 去掉mock数据,用后台接口登录](https://blog.csdn.net/weixin_45835850/article/details/116228701)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值