vue-cli3.x 配置代理，封裝axios

vue-cli3.x也發佈有一段時間了。
首先是目錄的更改。新增vue.config.js。

配置代理
在項目根目錄下新建vue.config.js

module.exports = {
    devServer: {
        host:"localhost",//要設置當前訪問的ip 否則失效
        open: true, //瀏覽器自動打開頁面
        proxy: {
            '/api': {
            target: '目標網址',
            ws: true,
            changeOrigin: true,
            pathRewrite:{
                '^/api':''
            }
        }
      }
    }
  }

這樣配置就完成了。

封裝axios
配合代理使用
首先，根目錄創建一個config目錄
config目錄下新建axios.js和env.js

env.js

//根據不同的環境更改不同的baseUrl
let baseUrl = '';

if (process.env.NODE_ENV == 'development') {
    baseUrl = '/api';

} else if (process.env.NODE_ENV == 'production') {
    //baseUrl = '測試地址';
    //baseUrl = '預發佈地址';
    baseUrl = '生產地址';
}

export {
    baseUrl,//導出baseUrl
}

axios.js
再次封裝axios.js 進行全局使用

import {
  baseUrl, //引入baseUrl 
} from "../config/env";
import axios from 'axios';
axios.defaults.timeout = 10000; //設置請求時間
axios.defaults.baseURL = baseUrl;//設置默認接口地址
/**
 * 封裝get方法
 * @param url
 * @param data
 * @returns {Promise}
*/
export function fetch(url,params={}){
    return new Promise((resolve,reject) => {
      axios.get(url,{
        params:params
      })
      .then(response => {
        resolve(response.data);
      })
      .catch(err => {
        reject(err)
      })
    })
  }
/**
 * 封裝post請求
 * @param url
 * @param data
 * @returns {Promise}
 */

 export function post(url,data = {}){
   return new Promise((resolve,reject) => {
     axios.post(url,data)
          .then(response => {
            resolve(response.data);
          }
           .catch(err => {
            reject(err)
          })
   })
 }

main.js

//把如下代碼加入main.js
import { post, fetch }  from "../config/axios";
Vue.prototype.$get=fetch;
Vue.prototype.$post=post;

請求事例

//因爲設置了默認axios的接口地址，所以直接寫後面的接口名字就行
this.$get("/posts").then((res)=>{
     console.log(res)
  })

到此就結束了  ^0^

原文鏈接:https://blog.csdn.net/qq_35431814/article/details/87938699