当前位置： 移动技术网 > IT编程>脚本编程>vue.js > vue.config.js配置和axios简单封装

vue.config.js配置和axios简单封装

2020年08月02日  | 移动技术网IT编程  | 我要评论

一个简单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

这里主要使用了下面两个方法：

  1. qs.parse()是将URL解析成对象的形式
  2. 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; } }); }

本文地址：https://blog.csdn.net/weixin_49238278/article/details/107721674

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网