webpack 2.xx自动打包配置 及axios二次封装

package.json

//  "webpack": "^3.6.0", config 配置
  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config --hot --host 0.0.0.0 build/webpack.dev.conf.js",
    "dev:test": "webpack-dev-server --inline --progress --env=test --config build/webpack.dev.conf.js",
    "dev:prod": "webpack-dev-server --inline --progress --env=prod --config build/webpack.dev.conf.js",
    "start": "npm run dev",
    "build:dev": "node build/build.js",
    "build:uat": "node build/build.js test",
    "build": "node build/build.js prod"
  },

bulid config

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  ADMIN_SERVER: '"/api/"'
})

"use strict";
let params = process.argv[2];
let baseUrl = "";
switch (params) {
  case "test":
    baseUrl = '"https://ystest.yschsz.com:7006/"'
    break;
  case "prod":
    baseUrl = '"https://ysjk.yschsz.com/"'
    break;
  default:
    baseUrl = '"http://192.168.1.128:7006/"'
}

module.exports = {
  NODE_ENV: '"production"',
  prod: baseUrl
};

axios baseUrl

let baseUrl = "";
let routerMode = "";
let imgBaseUrl = "";
if (process.env.NODE_ENV == "development") {
  //开发环境
  baseUrl = process.env.ADMIN_SERVER;
} else if (process.env.NODE_ENV == "production") {
  //正式环境
  baseUrl = process.env.prod;
  routerMode = "hash";
}

export { baseUrl, routerMode, imgBaseUrl };

//网络请求
import axios from "axios";
import store from "@/config/store";
import route from "@/router/index";
import { baseUrl } from "@/config/env";
import { prompt } from "@/config/until";
// 自动设置
// axios.defaults.withCredentials = false;
axios.defaults.baseURL = baseUrl;
// 添加请求拦截器
let num = 0;
axios.interceptors.request.use(
  config => {
    store.commit("setDataLoading", true);
    // config.headers['cookie'] = localStorage.getItem('cookie')
    num++;
    return config;
  },
  error => {

    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  response => {
    num--;
    if (num == 0) {
      store.commit("setDataLoading", false);
    }
    if (response.data.success) {
      return response.data;
    } else {
      if (response.data.respStatus == 3001) {
        route.replace({ name: "login" });
        return false;
      } else if (response.data.respStatus == 6005) {
        prompt(response.data.respDesc);
        return false;
      } else if (response.data.respStatus == 6006) {
        prompt(response.data.respDesc);
        return false;
      } else if(response.data.respStatus == 3002) {
        if(response.data.respDesc == 'user\'s phone is empty.') {
          prompt('用户档案信息没有手机号信息');
          return false;
        }
        prompt(response.data.respDesc);
        return false;
      }
      if (response.data != "") {
        prompt(response.data.respDesc);
        return false;
      }
    }
  },
  error => {
    return Promise.reject(error);
    store.commit("setDataLoading", false);
  }
);

export { axios };

// http/index.js
import axios from 'axios'
import {
    ElLoading,
    ElMessage
} from 'element-plus';
//创建axios的一个实例 
var instance = axios.create({
    baseURL: import.meta.env.VITE_APP_URL, //接口统一域名
    timeout: 6000, //设置超时
    headers: {
        'Content-Type': 'application/json;charset=UTF-8;',
    }
})
let loading;
//正在请求的数量
let requestCount = 0
//显示loading
const showLoading = () => {
    if (requestCount === 0 && !loading) {
        loading = ElLoading.service({
            text: "Loading  ",
            background: 'rgba(0, 0, 0, 0.7)',
            spinner: 'el-icon-loading',
        })
    }
    requestCount++;
}
//隐藏loading
const hideLoading = () => {
    requestCount--
    if (requestCount == 0) {
        loading.close()
    }
}

//请求拦截器 
instance.interceptors.request.use((config) => {
        showLoading()
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        const token = window.localStorage.getItem('token');
        token && (config.headers.Authorization = token)
        //若请求方式为post，则将data参数转为JSON字符串
        if (config.method === 'POST') {
            config.data = JSON.stringify(config.data);
        }
        return config;
    }, (error) =>
    // 对请求错误做些什么
    Promise.reject(error));

//响应拦截器
instance.interceptors.response.use((response) => {
    hideLoading()
    //响应成功
    console.log('拦截器报错');
    return response.data;
}, (error) => {
    console.log(error)
    //响应错误
    if(error.response&&error.response.status){
	   const status = error.response.status
	    switch (status) {
	        case 400:
	            message = '请求错误';
	            break;
	        case 401:
	            message = '请求错误';
	            break;
	        case 404:
	            message = '请求地址出错';
	            break;
	        case 408:
	            message = '请求超时';
	            break;
	        case 500:
	            message = '服务器内部错误!';
	            break;
	        case 501:
	            message = '服务未实现!';
	            break;
	        case 502:
	            message = '网关错误!';
	            break;
	        case 503:
	            message = '服务不可用!';
	            break;
	        case 504:
	            message = '网关超时!';
	            break;
	        case 505:
	            message = 'HTTP版本不受支持';
	            break;
	        default:
	            message = '请求失败'
	    }
		    ElMessage.error(message);
		    return Promise.reject(error);
       }
    return Promise.reject(error);
});


export default instance;
————————————————
版权声明：本文为CSDN博主「慌张°」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_44698285/article/details/116271180