[JavaScript知识库] vue.config.js中代理的理解

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue.config.js中代理的理解 -> 正文阅读

[JavaScript知识库]vue.config.js中代理的理解

.env.dev

NODEV_ENV='dev'
VUE_APP_BASEURL='/api'

.env.production

NODEV_ENV='production'
VUE_APP_BASEURL='https://test.bgo.com.cn'

vue.config.js中的serve

module.exports = defineConfig({
  publicPath:'',
  devServer:{
    proxy:{
      [process.env.VUE_APP_BASEURL]: { //拦截以api开头的路径
        target: 'https://bimtalktest.bimgo.com.cn', // 代理接口地址
        changeOrigin: true, //是否开启跨域
        pathRewrite:{
          ['^'+process.env.VUE_APP_BASEURL]:''//重写api前缀
        }
      }
    }
  },
  lintOnSave:false,
  transpileDependencies: true
})

分析：

开发环境 process.env.VUE_APP_BASEURL===‘/api’
以接口：main/api/ViewPointMessages为例
1./api会拼接到路由上
2.以/api起头的api会命中代理，避免跨域
3./api会命中代理中的路由重写，把/api重置为空，先重写，再代理。服务器解析地址是代理地址+