1.脚手架创建项目
vue create test-app
2.安装axios 和 vant
npm instaill axios vant --save
3.进入项目根目录新建两个文件
.env.development (开发环境)
.env.production (测试环境)
.env.development {
/* 文件中的内容主要是对开发环境和生产环境的请求接口路径做修改 */
NODE_ENV = 'development'
VUE_APP_API_URL = '/api'
}
.env.production {
NODE_ENV = 'development'
VUE_APP_API_URL = 'http://172.25.3.134:7085/IcaQywxServer/rest/api/conversation/findAllByCon'
}
tips:因为我们本地开发的时候会遇到跨域问题需要做反向代理,所以这里使用的api,
4.axios封装
1.新建request文件夹,request.js用做封装请求,api对所有的接口进行统一管理
request.js代码如下
import axios from 'axios'
import QS from 'qs'; // 引入qs模块,用来序列化post类型的数据,
import Vue from 'vue'
import { Toast } from 'vant' // element-ui
// 创建axios实例
const request = axios.create({
baseURL: process.env.VUE_APP_API_URL,
timeout: 10000 // 请求超时时间
})
function startLoading() {
// 开始加载
Toast.loading({
message: '加载中...',
forbidClick: true,
});
}
function endLoading() {
// 结束加载
Toast.clear()
}
// 添加request拦截器
request.interceptors.request.use(config => {
startLoading()
return config
}, error => {
Promise.reject(error)
})
// 添加respone拦截器
request.interceptors.response.use(
response => {
if (response.data.code != 0) {
return Promise.reject(response)
}
return Promise.resolve(response.data.data)
},
error => {
startLoading()
if (error.response) {
switch (error.response.status) {
case 401:
console.log(401)
break;
case 403:
console.log(403)
break;
case 404:
console.log(404)
break;
case 500:
console.log(500)
break;
}
}
return Promise.reject(error.response)
}
)
export default request
api.js文件代码如下
import request from './request'
/**
* @parms resquest 请求地址 例如:http://197.82.15.15:8088/request/...
* @param '/testIp'代表vue-cil中config,index.js中配置的代理
*/
export function getuserInfo(obj) {
return request({
url: '/yuni/user/setinfo',
method: 'post',
data: obj,
})
}
// 例如(get):
export function getBookList(obj) {
return request({
url: '/book/list',
method: 'post',
params: obj,
})
}
tips:request请求中的baseurl:会自动判断你当前的运行环境是开发还是生产环境进行配置url 我们之前新建的哪两个文件,一个baseurl是 ‘/api’ ,还有一个是’http://172.25.3.134:7085…’, 如果是本地开发的话就采用development的baseurl ‘/api’ ,如果是生产环境就切换到 production的baseurl:’/…’,
5.如何切换开发环境和生产环境
package.json中
"serve": "vue-cli-service serve",
"production-serve": "vue-cli-service serve --mode production",
tips:因为你输入npm run serve的时候默认启动的就是开发环境的,所以做一个小小的配置
还有配置打正式环境和测试环境的build包 还没做一个详细的整理,希望各位大佬能够不吝赐教 , 前端小菜鸡一枚