vue-element-admin|vue-element-admin v4.x入门 & 去除mock请求自己接口 & 跨域问题 vue-element-adminv4.x入门&去除moc

【vue-element-admin|vue-element-admin v4.x入门 & 去除mock请求自己接口 & 跨域问题】编写时间： 2019年7月21日

作为一个新手使用本后台模板也是研究了很长时间，期间也是踩了很多坑。
对于新手来说的第一个难点就是对接自己的接口，取消项目本身的mock数据了，毕竟使用这个就是要使用自己的后台数据了
以下是自己使用过程中的一些信息点的记录，主要介绍请求跨域请求自己的接口

0. 首先不用说就是下载项目导入项目了
导入项目后执行安装命令 npm install
1. 准备接口
? 我们不用项目本身的虚拟数据，当然要准备自身的数据接口啦。
? 在此我将自己的测试接口放上来供大家测试使用（不保证此接口一直正常使用），下面都将以这个接口为例演示。

? http://123.56.156.57/admin/test 测试接口，若有返回结果报名我的接口可正常使用，若无返回数据则接口以失效，请自己搭建自己的接口
? http://123.56.156.57/admin/login 登录接口，参数username和password
? http://123.56.156.57/admin/info 参数是token

? 至少需要上面的login和info接口，你才可以成功登录管理界面中

另：上面的接口参数和返回值有一定的格式规范才和vue-element-admin的解析相适应，你可以通过抓包查看数据格式，可以参考下图我提供的：
login接口:

vue-element-admin|vue-element-admin v4.x入门 & 去除mock请求自己接口 & 跨域问题

文章图片
1563613761720.png info接口：

文章图片
1563613803449.png 2. 修改代码的相关配置
1）打开vue.config.js 修改devServer下的proxy : 将：

proxy: { // change xxx-api/login => mock/login // detail: https://cli.vuejs.org/config/#devserver-proxy [process.env.VUE_APP_BASE_API]: { target: `http://127.0.0.1:${port}/mock`, changeOrigin: true, pathRewrite: { ['^' + process.env.VUE_APP_BASE_API]: '' } }

修改为：

proxy: { '/api': { target: `http://123.56.156.57`, // 这个链接是要代理到的api地址 changeOrigin: true, pathRewrite: { '^/api': '' } } }

? 这里应该是应该保留process.env.VUE_APP_BASE_API]:这样的写法的，但是我这里一直没调试通，所以我就没想太多，使用了'/api'：{}这样的写法，网友你若调试通了保留process.env.VUE_APP_BASE_API]这样的写法，请在评论区教教小弟我 ~ _ ~

2）将刚才修改的代码的下面的一行代码注释掉注释掉： after: require('./mock/mock-server.js')，如下图

文章图片
1563614832948.png 3）修改src/main.js文件 ? 注释掉关于mock的代码，如下图

文章图片
1563615003576.png

import { mockXHR } from '../mock' if (process.env.NODE_ENV === 'production') { mockXHR() }

[图片上传失败...(image-2ed6cc-1563672511132)]
4) 修改.env.development文件修改:

# base api VUE_APP_BASE_API = '/dev-api'

修改为：

# base api VUE_APP_BASE_API = 'http://123.56.156.57/'

友情提醒，.env.production中的这个参数记得也要改（同上），这个文件中的参数是在项目打包后生产阶段下会起作用

5）修改src/api/user.js文件修改login和getInfo如下：

export function login(data) { return request({ url: '/api/admin/login', method: 'post', data }) }export function getInfo(token) { return request({ url: '/api/admin/info', method: 'get', params: { token } }) }

6）最后修改src/utils/request.js文件注释掉第八行的baseURL: process.env.VUE_APP_BASE_API,如下图：