編寫時間： 2019年7月21日
作為一個新手使用本后臺模板也是研究了很長時間创肥，期間也是踩了很多坑。
對于新手來說的第一個難點(diǎn)就是對接自己的接口，取消項(xiàng)目本身的mock數(shù)據(jù)了龙巨，畢竟使用這個就是要使用自己的后臺數(shù)據(jù)了
以下是自己使用過程中的一些信息點(diǎn)的記錄无拗，主要介紹請求跨域請求自己的接口
0. 首先不用說就是下載項(xiàng)目導(dǎo)入項(xiàng)目了
導(dǎo)入項(xiàng)目后執(zhí)行安裝命令 npm install
1. 準(zhǔn)備接口
? 我們不用項(xiàng)目本身的虛擬數(shù)據(jù)带到，當(dāng)然要準(zhǔn)備自身 的數(shù)據(jù)接口啦。
? 在此 我將自己的測試接口放上來供大家測試使用（不保證此接口一直正常使用）英染，下面都將以這個接口為例演示揽惹。
? http://123.56.156.57/admin/test 測試接口被饿，若有返回結(jié)果報名我的接口可正常使用，若無返回數(shù)據(jù)則接口以失效搪搏，請自己搭建自己的接口
? http://123.56.156.57/admin/login 登錄接口狭握，參數(shù)username和password
-
? http://123.56.156.57/admin/info 參數(shù) 是token
? 至少需要上面的login和info接口，你才可以成功登錄管理界面中
另：上面的接口參數(shù)和返回值有一定的格式規(guī)范才和vue-element-admin的解析相適應(yīng)疯溺，你可以通過抓包查看數(shù)據(jù)格式哥牍，可以參考下圖我提供的：
login接口:
info接口：
2. 修改代碼的相關(guān)配置
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': ''
}
}
}
? 這里應(yīng)該是應(yīng)該保留
process.env.VUE_APP_BASE_API]:這樣的寫法的，但是我這里一直沒調(diào)試通喝检，所以我就沒想太多嗅辣，使用了'/api'：{}這樣的寫法，網(wǎng)友你若調(diào)試通了保留process.env.VUE_APP_BASE_API]這樣的寫法挠说，請?jiān)谠u論區(qū)教教小弟我 ~ _ ~
2）將 剛才修改的代碼的下面的一行代碼注釋掉
注釋掉： after: require('./mock/mock-server.js')澡谭，如下圖
3）修改src/main.js文件
? 注釋掉關(guān)于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中的這個參數(shù)記得也要改（同上）蛙奖，這個文件中的參數(shù)是在項(xiàng)目打包后生產(chǎn)階段下會起作用
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,如下圖：
后期項(xiàng)目部署的時候這行代碼需要釋放出來
? 最后啟動項(xiàng)目，并嘗試登陸杆兵，看是否能成功登陸進(jìn)系統(tǒng)中雁仲，如果沒有問題則我們解決了vue-element-admin的去除mock，請求自己接口 以及這個過程中的跨域問題琐脏。
