vue訪問介面定義全域性變數
阿新 • • 發佈:2018-11-06
1.在config裡面找到dev.env.js以及prod.env.js兩個檔案,分別寫上定義的常量以及埠號,注意單引號雙引號
2. 在ajax的時候直接寫
`${process.env.URL_PATH}/app/appLogin`
或者
url: process.env.URL_PATH+'/app/appLogin',
在實際開發中,使用vue 後就是前後端分離開發了,這時候我們就需要訪問後臺的介面來拿到資料,需要URL,name,password來獲取到token才能正常使用介面,下面就來配置。
1.找到config資料夾,在prod.env.js中新增一下程式碼(若沒有此JS,自己建立一個就可以了)
'use strict'
module.exports = {
NODE_ENV: '"production"',
API_ROOT: '"//123.116.245.150:18081/api"',/*j後臺介面地址*/
USER_NAME: '""',/*賬號*/
PASS_WD: '""'/*密碼*/
}
2.找到config資料夾,在dev.env.js中新增下面程式碼。
'use strict' const merge = require('webpack-merge') const prodEnv = require('./prod.env') module.exports = merge(prodEnv, { API_ROOT: '"//125.116.245.101:18081/api"',/*後臺介面地址*/ USER_NAME: '"小小小"',/*賬號*/ PASS_WD: '"123456"',/*密碼*/ })
然後再登入頁面的from中呼叫這裡寫的變數
form: {
name: process.env.USER_NAME,
password: process.env.PASS_WD,
},
在main.js中設定頭部攔截器,程式碼如下
const url = process.env.API_ROOT; axios.interceptors.request.use( config => { let token = localStorage.getItem("x-auth-token"); if (token) { // 判斷是否存在token,如果存在的話,則每個http header都加上token config.headers.token = `${token}`; } if (config.url.indexOf(url) === -1) { let getTimestamp=new Date().getTime(); if(config.url.indexOf('?')>-1){ config.url = url + config.url +"×tamp="+getTimestamp; }else{ config.url = url +config.url +"?timestamp="+getTimestamp; } } return config; }, err => { alert(err) return Promise.reject(err); });
這樣訪問後臺介面配置就完成了