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接口:

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,如下图：

后期项目部署的时候这行代码需要释放出来

1563615666652.png

​ 最后启动项目，并尝试登陆，看是否能成功登陆进系统中，如果没有问题则我们解决了vue-element-admin的去除mock，请求自己接口 以及这个过程中的跨域问题。

亲爱的观众朋友们今天的新闻联播播放完毕，有疑问评论区讨论，拜拜！！！