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