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 //测试启动