一個簡單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; 
        }
      });
    }