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, // 编译失败时刷新页面
    disableHostCheck: true,	// 是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。
    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}`]: ''
          // 配置出来的接口没有 /api
          // 比如/api/admin/being/classes/classInfo 会被替代成/admin/being/classes/classInfo
        }
      }
    }
  },

PS：devServer.disableHostCheck配置项用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。 DevServer 默认只接受来自本地的请求，关闭后可以接受来自任何 HOST 的请求。 它通常用于搭配–host 0.0.0.0使用，因为你想要其它设备访问你本地的服务，但访问时是直接通过 IP 地址访问而不是 HOST 访问，所以需要关闭 HOST 检查。

其中的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,
  withCredentials: true, // send cookies when cross-domain requests
  timeout: 30000, // request timeout
  headers: {
    "Content-Type": "application/json;"
  }
});

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 getBrainInfo(params) {
  return service.request({
    url: '/expert/brain',
    method: 'get',
    params
  })
}

第二种

devServer: {
    disableHostCheck: true,
    open: true,
    host: '192.168.1.114', // 本机ip
    port: 3001, // 本机端口
    https: true,
    proxy: 'http://192.168.1.114:3000', // 需代理的地址
    before: app => {}
 },

参考：

https://blog.csdn.net/m0_50015961/article/details/109901080

https://cli.vuejs.org/zh/config/#devserver