在项目根目录下 创建vue.config.js文件 注：此文件跟src是同级路径而不是包含关系
module.exports={
? // 部署应用时的基本url
? publicPath:"",
? // 打包构建应用的文件夹
? outputDir:"dist",
? // 打包时存放静态资源的文件夹，js/img/css
? assetsDir:"static",
? // 指定生成的index文件
? indexPath:"index.html",
? // 配置请求代理
? devServer:{
? ? proxy:{
? ? ? "/api":{
? ? ? ? target:"http://localhost:3000",
? ? ? ? ws:true,
? ? ? ? // 是否允许跨域
? ? ? ? changeOrigin:true
? ? ? }
? ? }
? }
}
?
?
注意：配置完之后一定一定要重启项目
axios二次封装（在src路径下的request文件夹下创建http.js）
import?axios?from?"axios"
import?Vue?from?"vue"
import?qs?from?"qs"
import?store?from?'../store/index'
//?开发环境
let?path
if(process.env.NODE_ENV?===?"development"){
??console.log("开发环境");
??Vue.prototype.$pre?=?"http://localhost:3000"
??//?path="http://localhost:3000"
}
//?生产环境
if(process.env.NODE_ENV?===?"production"){
??console.log("生产环境");
??Vue.prototype.$pre?=?""
??//?path="http://localhost:8080"
}
//?请求拦截器
axios.interceptors.request.use(config=>{
??//?后台开启了验证，所以每一次请求的时候都需要携带token进行请求
??//?登录之后才拥有token，所以先判断
??if(config.url?!==?"/api/userlogin"){
????//?携带token进行请求
????config.headers.authorization?=?store.state.user.token
??}
??console.log(config);
??return?config
})
//?响应拦截器
axios.interceptors.response.use(res=>{
??console.group("本次请求的路径是："?+?res.config.url)
??console.log(res)
??console.groupEnd("拦截器结束")
//?判断登录时间是否过期
//?if(res.data.msg?=?"登录已过期或访问权限受限"){
//???//?跳转到登录页重新登录
//???//?window.location?=?path+"/login"
//???window.location?=?"http://localhost:8080/login"
//?}
??return?res
})
?
/*?
??get请求
????url???请求地址
????params??请求参数
*/
export?const?get?=?(url,params={})=>{
??return?new?Promise((resolve,error)=>{
????axios.get(url,{
??????params:params
????}).then(res=>{
??????resolve(res)
????}).catch(err=>{
??????error(err)
????})
??})
}
/*?
??post请求
????url???请求地址
????params??请求参数，如果有就传对象类型，如果没有就不传?
????isFile??是否有文件，如果有就传true，如果没有就不用传
*/
export?const?post?=?(url,params={},isFile=false)=>{
??let?data?=?null
??if(isFile){
????//?有文件
????data?=?new?FormData()
????for(let?i?in?params){
??????data.append(i,params[i])
????}
??}else{
????//?无文件
????data?=?qs.stringify(params)
??}
??return?new?Promise((resolve,error)=>{
????axios.post(url,data).then(res=>{
??????resolve(res)
????}).catch(err=>{
??????error(err)
????})
??})
}
?
使用
创建一个api.js文件（建议跟http.js文件同一个路径下）
import?{get,post}?from?'./http'
export?const?menuadd?=?(params)=>?post('/api/menuadd',params)
?