vue-cli版本2.9.6
一 配置開發(fā)環(huán)境
一般情況下開發(fā)環(huán)境是會跨域的，所以我們只需要在跨域的位置配置即可裙椭。
進(jìn)入config/index.js躏哩，在proxyTable對象里面添加代碼，如下圖
//方便復(fù)制
'/api': {
target: 'http://10.1.7.144:8082/', //這里填自己的接口地址
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
config/index.js
二 配置生產(chǎn)環(huán)境
進(jìn)入config/prod.env.js揉燃，添加屬性BASE_API為自己的生產(chǎn)環(huán)境地址即可扫尺，如下圖
config/prod.env.js
三 調(diào)后臺接口的方法(axios)
假設(shè)我們要接口的地址是：http://10.1.7.144:8082/mall/userinfo/delete
- 其中http://10.1.7.144:8082/我們已經(jīng)在一二步驟中配置好了
- /mall是項(xiàng)目的前綴，相當(dāng)于說每個(gè)接口都會有/mall
- /userinfo/delete是具體接口名稱(路徑)
1. 接著要封裝get與post方法炊汤，新建一個(gè)文件request.js
// request.js
import axios from "axios";
import qs from "qs";
//定義方法
export function post(url, params){
const basePath=process.env.NODE_ENV=="development" ? "/api/mall" : "/mall";
return axios.post(basePath+url, qs.stringify(params)); //如果不需要轉(zhuǎn)json的話正驻，那么第二次參數(shù)就是params
}
export function get(url,params){
let basePath=process.env.NODE_ENV=="development" ? "/api/mall" : "/mall";
return axios.get(basePath+url, { params });
}
2. 為了能在全局使用，在main.js中掛載到全局變量
// main.js
import {get, post} from "./request.js";
Vue.prototype.$get=get;
Vue.prototype.$post=post;
3. 方法調(diào)用
//任意文件調(diào)用
//使用抢腐，以post為例姑曙，get一樣
this.$post("/userinfo/delete", {
//這里面是要傳的數(shù)據(jù)
}).then(res=>{
console.log("成功");
console.log(res.data);
}).catch(res=>{
console.log("失敗");
console.log(res);
});
