一个简单vue.config.js配置和axios简单封装
一个简单vue.config.js配置和axios封装
从vue-cli3.0脚手架开始，搭建的Vue项目，目录中是不存在vue.config.js文件的。所以当我们想要做一些自己的配置的时候要自己手动建一个vue.config.js文件。
1、vue.config.js配置
新建vue.config.js
vue.config.js代码
module.exports = {
publicPath: process.env.NODE_ENV === 'production' ? '/kuaChengTongBan/' : '/',
outputDir: 'kuaChengTongBan', // 更改打包路径，项目默认的路径是dist
// 请求代理
devServer: {
proxy: {
//广州市海珠区
'/ApprItemInterface': {
//'/ApprItemInterface'是接口部署的包名
target: 'http://192.168.0.152:7001',//该包名部署的端口
ws: true,
changeOrigin: true
},
}
},
// 生产环境下的sourceMap
productionSourceMap: true,
chainWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config
.externals({
'vue': 'Vue',
'vue-router': 'VueRouter'
})
} else {
// 为开发环境修改配置...
}
},
lintOnSave: false, // eslint-loader 是否在保存的时候检查
}
2、axios简单封装使用
首先，进入vue项目，打开终端运行下面指令，安装axios
1| $ npm install axios --save
- 在项目的跟目录下建一个utils文件夹用于存放axios的封装文件。
- 首先建立一个.js文件，这里我将文件名命名为ajax.js，这个文件用于封装axios。
- 再建一个crossDomain.js文件，用于写调用的接口。
ajax.js代码
import axios from 'axios'
import qs from 'qs'
const ajaxBaseUrl = ''
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
});
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
if (response.data) {
return response.data
} else {
return Promise.reject(response)
}
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
});
/**
*
* @param {
string} url
* @param {
object} data
* @param {
string} type
* @param {
function} callFunc
* @param {
function} filter
*/
export function fetchData(url, data, type, callFunc, filter) {
let sendData = '';
if (filter && filter.constructor === Function) {
sendData = filter(data);
}
const config = {
};
config.method = type || 'post';
config.url = ajaxBaseUrl + url;
config.headers = {
'Content-Type': 'application/json;charset=UTF-8'
};
if (type === 'get') {
config.params = data;
} else {
config.data = sendData ? qs.stringify(data) : qs.stringify(data);
}
console.log("config",config, config.url );
if (!callFunc) {
return axios(config)
}
axios(config).then(res => {
callFunc(res)
}).catch(err => {
callFunc({
desc: 'axios统一拦截，捕获错误',
err: err
});
console.log('axios统一拦截，捕获错误：', err)
})
}
export function fetchMultiData(axiosArr, callFunc) {
axios.all(axiosArr).then(axios.spread((...resArr) => {
callFunc(resArr);
})).catch(err => {
callFunc({
desc: 'axios统一拦截，捕获错误',
err: err
});
console.log('axios统一拦截，捕获错误：', err)
})
}
在这ajax.js中可以看到使用了 qs 插件，所以在使用之前我们要在终端中运行下面指令进行安装。
1|npm install qs
这里主要使用了下面两个方法：
- qs.parse()是将URL解析成对象的形式
- qs.stringify()是将对象 序列化成URL的形式，以&进行拼接
crossDomain.js代码
import {
fetchData } from './ajax.js';//在这个文件顶部引入封装axios的js文件
// 校验函数
const checkFunc = (func) => {
return func && (func.constructor === Function);
};
//暴露接口方法sgCashProgramList
export function sgCashProgramList(data, type, callFunc) {
const options = checkFunc(callFunc) ? [data, type, callFunc] : [data, type];
let url = '/ApprItemInterface/api/program/programList/1/query.v';//接口
return fetchData(url, ...options);
}
使用上面这个接口：
在需要使用该接口的页面中引入该 接口如下：
全部引入：使用这个语句就可以在页面中调用crossDomain.js中暴露的接口方法：
1|import * as requestApi from '@/utils/crossDomain.js';
单个引入：
1|import {
sgCashProgramList } from '@/utils/crossDomain.js';
调用：
getList(val){
requestApi.sgCashProgramList({
attrTypeCode:val,
pageRowNum:9999
},'get', res => {
if(res.status ==200){
this.tableData1 = res.data.dataList;
}
});
}