1、在main.js同級目錄下   新建api.js

import axios from 'axios';
import qs from 'qs';

//設定預設請求方式，指定Content-Type
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
const instance = axios.create({
  baseURL: '/api', 
  timeout: 3000,  
});

//vue全域性擴充套件方法介面
function install(Vue) {
  Vue.prototype.$ajax = {
    post,
    get
  };
}

//post請求方法，並根據不同請求型別傳入指定的 headers

async function post(url, opts = {}, headers) {
  var result = {};
  try {
    result = await instance.post(url, qs.stringify(opts), headers);
  } catch (e) {
    console.log(e)
    result = e.response || {
      data: null
    };
  }
  return result.data;
}

async function get(url, type, opts = {}) {
  var result = {};

  try {
    result = await instance.get(url, opts);
  } catch (e) {
    console.log(e)
    result = e.response || {
      data: null
    };
  }
  return result.data;
}

export default {
  install
}
 

2、在 main.js中全域性引用即可

//在main.js中新增

import api from "./api";
Vue.use(api);

3、webpack 代理

webpack.base.config.js，在module.exports 中新增

  devServer: {
        historyApiFallback: true,
        hot: true,
        inline: true,
        stats: { colors: true },
        proxy: {
            "/api": {  //axios中給請求新增 /api,用於代理標識
                  target: 'http://1.1.1.1:8081',   //目標地址
                  secure: false, // 接受 執行在 https 上的服務
                  changeOrigin: true,
                  pathRewrite:{'^/api':''}, //重寫請求路徑，把/api用空替換掉
            }
        },
    },