第一步:设置不同的接口地址
找到文件:/config/dev.env.js
代码修改为:
1
2
3
4
5
6
7
|
var merge = require( ‘webpack-merge‘ )
var prodEnv = require( ‘./prod.env‘ )
module.exports = merge(prodEnv, { NODE_ENV: ‘"development"‘ ,<br> //添加
API_ROOT: ‘"//192.168.1.8/api"‘
}) |
/config/prod.env.js
代码修改为:
1
2
3
4
5
|
module.exports = { NODE_ENV: ‘"production"‘ ,
//添加
API_ROOT: ‘"//www.baidu.com/api"‘
} |
第二步:调用axios的文件下修改baseUrl
1
|
axios.defaults.baseURL = process.env.API_ROOT |
最后重启项目:
这样在开发环境执行npm run dev 的时候,就调用的是
1
|
192.168.1.8/api<br>而在执行npm run build打包的时候则调用的是 |
1
|
www.baidu.com/api |
import axios from ‘axios‘ import qs from ‘qs‘ import * as _ from ‘../util/tool‘ axios.defaults.timeout = 5000; //响应时间 axios.defaults.headers.post[‘Content-Type‘] = ‘application/x-www-form-urlencoded;charset=UTF-8‘; //配置请求头 axios.defaults.baseURL = ‘你的接口地址‘; //配置接口地址 //POST传参序列化(添加请求拦截器) axios.interceptors.request.use((config) => { //在发送请求之前做某件事 if(config.method === ‘post‘){ config.data = qs.stringify(config.data); } return config; },(error) =>{ _.toast("错误的传参", ‘fail‘); return Promise.reject(error); }); //返回状态判断(添加响应拦截器) axios.interceptors.response.use((res) =>{ //对响应数据做些事 if(!res.data.success){ // _.toast(res.data.msg); return Promise.reject(res); } return res; }, (error) => { _.toast("网络异常", ‘fail‘); return Promise.reject(error); }); //返回一个Promise(发送post请求) export function fetchPost(url, params) { return new Promise((resolve, reject) => { axios.post(url, params) .then(response => { resolve(response.data); }, err => { reject(err); }) .catch((error) => { reject(error) }) }) } ////返回一个Promise(发送get请求) export function fetchGet(url, param) { return new Promise((resolve, reject) => { axios.get(url, {params: param}) .then(response => { resolve(response.data) }, err => { reject(err) }) .catch((error) => { reject(error) }) }) }