欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2024-01-02 13:25:52
一个简单vue.config.js配置和axios封装从vue-cli3.0脚手架开始,搭建的Vue项目,目录中是不存在vue.config.js文件的。所以当我们想要做一些自己的配置的时候要自己手动建一个vue.config.js文件。1、vue.config.js配置新建vue.config.jsvue.config.js代码module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/kuaChe...

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

从vue-cli3.0脚手架开始,搭建的Vue项目,目录中是不存在vue.config.js文件的。所以当我们想要做一些自己的配置的时候要自己手动建一个vue.config.js文件。

1、vue.config.js配置

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

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文件,用于写调用的接口。

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

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

相关标签: vue.js

上一篇:

下一篇: