vue.config.js文件里的devServer本地开发相关配置

如果你的前端应用和后端 需要跨域，你需要在开发环境下将 API 请求代理到 API 服务器。可以通过 *.config.js 中的 devServer.proxy 选项来配置。

 devServer: {
     open: false, // 编译完成是否打开网页
     host:'0.0.0.0', // 指定使用地址，默认localhost,0.0.0.0代表可以被外界访问
     port: 8080, // 访问端口
     https: false, // 编译失败时刷新页面
     hot: true, // 开启热加载
     hotOnly: false,
     proxy: {
       [process.env.VUE_APP_API]: {//拦截器(拦截链接中有/api)
           target: process.env.VUE_API_DEV_TARGET,//'http://192.168.1.114:3000', //process.env.VUE_API_DEV_TARGET, //API服务器的地址
           changeOrigin: true,
           pathRewrite: {
              //'^/api': '/' 
               [`^${process.env.VUE_APP_API}`]: '',
               //[`^${process.env.VUE_APP_API}`]: '/', //配置出来的接口没有 /api
           }
        }
     }
  },

其中的process.env.Vue_app_API是开发环境文件.env.development中的内容

VUE_APP_API = "/api"
VUE_API_DEV_TARGET = "http://192.168.1.114:3000/" //请求地址

axios创建

//创建实例
const service = axios.create({
    
    baseURL:process.env.VUE_APP_API,//需要在请求API中添加 /api
    timeout:5000,//超时
});

1、proxy会拦截所有url中可以成功匹配到 ‘/api’ 的请求。（proxy采用正则匹配，一旦url中包含你要的字符串则停止向下匹配，详查proxy匹配规则）

2、它会把拦截到的请求中的baseUrl替换为此处的target

如，http://192.168.1.114:3000/banner为请求内容的api,本地项目为http://192.168.1.114:3001/进行访问，这就需要跨域，经过上述配置后。使用http://192.168.1.114:3001/api/baner请求时，通过devServer.proxy拦截器把http://192.168.1.114:3001/api进行替换成http://192.168.1.114:3000/后加/banner进行请求

api调用

export function FindBanner(data={}){
    return service.request({
        method:"get",
        url:"/api/banner",
        params:data
    })
}