编写时间： 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接口:
info接口：
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')，如下图
3）修改src/main.js文件
注释掉关于mock的代码，如下图
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,如下图：
后期项目部署的时候这行代码需要释放出来
最后启动项目，并尝试登陆，看是否能成功登陆进系统中，如果没有问题则我们解决了vue-element-admin的去除mock，请求自己接口 以及这个过程中的跨域问题。
