1.目录结构2.配置2.1vue.config.js使用@代替/src目录，避免写错路径constpath=require('path')constresolve=dir=>{returnpath.join(__dirname,dir)}module.exports={devServer:{open:true,host:'localhost',port:8080,https:false,hotOnly:false,disableHostCheck:true,proxy:{//配置跨域'/api':{target:'http://localhost:8000/',ws:true,changOrigin:true,pathRewrite:{'^/api':''}}},before:app=>{}},chainWebpack:config=>{//key和value自己定义config.resolve.alias.set('@',resolve('src'))}};2.2config.jsexportdefault{//配置在浏览器选项卡title中显示的标题:'Sinking',//token在cookie中保存的天数，默认1天cookieExpires:1,//是否使用国际化，默认为false如果不使用，需要在路由中设置meta对于需要在菜单中显示的路由：{title:'xxx'}用于在菜单中显示文字useI18n:true,//api请求基本路径baseUrl:{dev:'http://localhost:8000/',pro:'https://xxx.com/api/'},//默认打开首页的路由名称值，默认为homehomeName:'home',//需要加载的插件plugin:{'error-store':{//如果设置为false，则错误日志标识不会显示在顶部showInHeader:true,//如果设置为true,开发环境不会收集错误信息,方便开发时排查错误developmentOff:true}}}2.3request.jsimportHttpRequestfrom'@/utils/axios'importconfigfrom'@/config'constbaseUrl=process.env.NODE_ENV==='development'?config.baseUrl.dev:config.baseUrl.proconstaxios=newHttpRequest(baseUrl)exportdefaultaxios2.4axios.jsimportaxiosfrom'axios'classHttpRequest{constructor(baseUrl){this.baseUrl=baseUrlthis.queue={}}getInsideConfig(){constconfig={baseURL:this.baseUrl,headers:{Authorization:''}}returnconfig}destroy(url){deletethis.queue[url]if(!Object.keys(this.queue).length){//Spin.hide()}}拦截器（实例，url）{//请求拦截instance.interceptors.request.use(config=>{//添加全局加载...if(!Object.keys(this.queue).length){//Spin.show()//不推荐打开，因为界面不友好}this.queue[url]=truereturnconfig},error=>{returnPromise.reject(error)})//响应拦截instance.interceptors.response.use(res=>{this.destroy(url)const{data}=resif(typeofdata==='object'){//自己处理}returndata},error=>{this.destroy(url)leterrorInfo=error.responseif(!errorInfo){const{request:{statusText,status},config}=JSON.parse(JSON.stringify(error))errorInfo={statusText,status,request:{responseURL:config.url}}控制台。log(errorInfo)}returnPromise.reject(error)})}request(options){constinstance=axios.create()options=Object.assign(this.getInsideConfig(),选项)this.interceptors(instance,options.url)returninstance(options)}}exportdefaultHttpRequest2.5api.jsimportaxiosfrom'@/utils/request'exportconstinsert=(data)=>{returnaxios.request({url:'/insert',method:'post',data})}exportconstupdate=(data)=>{returnaxios.request({url:'/update',method:'post',data})}exportconstgetList=(params)=>{returnaxios.request({url:'/getList',method:'get',params})}3、使用import{getList,update}from'@/api/api'test(){getList({limit:10,offset:1}).then(res=>{if(res.status===200){console.log(res)}})update({name:'沉潜',userId:1}).then(res=>{if(res.status===200){console.log(res)}})}
