vue请求环境详细配置

1.首先创建开发，测试，生产 对应的环境文件
.env.dev

NODE_ENV = 'development'
VUE_APP_CURRENTMODE = 'dev'

.env.prod

NODE_ENV = 'prod'
VUE_APP_CURRENTMODE = 'prod'

.env.test

NODE_ENV = 'test'
VUE_APP_CURRENTMODE = 'test'

2.创建api.js文件

var baseUrl
//判断环境
if (process.env.NODE_ENV=="development") {
    baseUrl="http://xxxx:19081"
}else if (process.env.NODE_ENV=="prod") {
    baseUrl="http://xxxx:19081"
}else if (process.env.NODE_ENV=="test") {
    baseUrl="http://xxxx:19082"
}

let online_url={
    list:baseUrl+"/xx/xx/xx",    
}
   
export default online_url 

3.创建request.js

import axios from 'axios';
import store from "../store/index";
axios.defaults.timeout =  10000;


// 添加请求拦截器
axios.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  store.commit('setLoading',true);//打开loading

  return config;
}, function (error) {
  // 对请求错误做些什么

  return Promise.reject(error);
});


//发送请求
export default (url,data={},method="get")=>{

   if (method=="get") {  //get请求
    return new Promise((resolve, reject) => {
      axios.get(url, {params: data}).then(response => {
        resolve(response.data)
      }).catch((error) => {
        reject(error)
      })
    })
   }else if (method=="post") { //post请求
     return new Promise((resolve, reject) => {
      axios({
        method: "post",
        url,
        headers: {
          "Content-Type": "application/json;charset=UTF-8"
        },
        params:data
      }).then(response => {
        resolve(response.data)
       }).catch((error) => { 
        reject(error)
       })
     })
  
   }else if (method=="put") { //put请求
    return new Promise((resolve, reject) => {
      axios.put(url, data).then(response => {
        resolve(response.data)
      }).catch((error) => {
        reject(error)
      })
    })       
   }else if (method=="delete") { //delete请求
    return new Promise((resolve, reject) => {
      axios.delete(url, data).then(response => {
        resolve(response.data)
      }).catch((error) => {
        reject(error)
      })
    })   
   }

  }
// 添加响应拦截器
axios.interceptors.response.use(function (response) {
  // 对响应数据做点什么
  store.commit('setLoading',false);//关闭loading

  return response;
}, function (err) {
  // 对响应错误做点什么
  store.commit('setLoading',false);//关闭loading
  if (err && err.response) {
    switch (err.response.status) {
        case 400: err.message = '请求错误(400)'; break;
        // case 401: return history.push('/login'); break;
        case 403: err.message = '拒绝访问(403)'; break;
        case 404: err.message = '请求出错(404)'; break;
        case 408: err.message = '请求超时(408)'; break;
        case 500: err.message = '服务器错误(500)'; break;
        case 501: err.message = '服务未实现(501)'; break;
        case 502: err.message = '网络错误(502)'; break;
        case 503: err.message = '服务不可用(503)'; break;
        case 504: err.message = '网络超时(504)'; break;
        case 505: err.message = 'HTTP版本不受支持(505)'; break;
        default: err.message = `连接出错(${err.response.status})!`;
    }
} else {
    err.message = '连接服务器失败!'
}

return Promise.reject(err);
});

4.App.vue中设置加载动画

<div v-loading='fetchLoading' class="loading"></div> //需引入elementUI

  computed:{
      fetchLoading(){
        return this.$store.state.fetchLoading
      }
  },


vuex中设置加载状态
fetchLoading:false, //loading加载

5.在main.js中引入api.js’

import Api from '../public/api.js'

// 将Api对象绑定在vue实例的原型上
Vue.prototype.$Api = Api

//引入请求方法
import request from '../src/js/request.js'
Vue.prototype.$request = request

6.组件内使用

    //获取列表
    getlist() {
      this.$request(
        this.$Api.list,
        { type: "规章制度", page: this.page, limit: this.limit },
        "post"
      )
        .then((res) => {
         this.total=res.data.total;
         this.list=res.data.records;  
         console.log(res);
        })
        .catch((e) => {console.log(e);});
    },
    

6.package.json

  "scripts": {
    "serve": "vue-cli-service serve --open",
    "build:prod": "vue-cli-service build --mode prod",
    "lint": "vue-cli-service lint"
  },

7.启动指令
npm run dev //开发启动
npm run build:prod //上线启动
npm run build:test //测试启动