vue vue.config.js 代理不通

Question

vue proxy 代理

 proxy: {
      [process.env.VUE_APP_API]: {
        target: process.env.VUE_APP_BASE_HREF,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_API]: ''
        }
      },
      '/upload-url':{
        target: process.env.VUE_APP_UPLOAD_URL,
        changeOrigin: true,
        pathRewrite: {
          '^/upload-url': '/'
        }
      },
}

一开始我的两个代理这样写，http://192.168.2.150:8063/upload-url/upload%E8%AF%B7%E6%B1%82%E5%9C%B0%E5%9D%80%E6%98%AF%E8%BF%99%E4%B8%AA 但是报下边这个错

  '/upload-url':{
        target: process.env.VUE_APP_UPLOAD_URL,
        changeOrigin: true,
        pathRewrite: {
          '^/upload-url': '/'
        }
      },
      [process.env.VUE_APP_API]: {
        target: process.env.VUE_APP_BASE_HREF,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_API]: ''
        }
      },

后来我只是两个代理的顺序换了下就通了，可以帮忙解释下这是为什么？

Answer 1

可能解决了问题的原因可能是因为路由匹配的顺序问题导致。在 Vue CLI 生成的项目中，通常会有一个名为 index.js 的路由文件，其中定义了路由的顺序。路由匹配会按照定义的顺序进行处理，优先匹配先定义的路由。