Vue反向代理,代理失效的一种判断

。。、其实我也不知道改起什么题目，反正公司的项目在这个代理的问题上出现问题了，等最后细说把~

注意vue-cli的版本，有两种情况

• 3一下不包括3。
• 3以上

注意：这里说的版本问题全都是vue-cli的版本，在cmd输入vue -V可以找到。

vue-cli3以下的版本我们在创建项目的目录的时候可以清楚的看见目录就有所不同。

//3以下
|-build
|	|-build.js
|	|-logo.png
|	|-check-versions.js
|	|-utils.js
|	|-webpack.dev.conf.js
|	|-webpack.base.conf.js
|	|-webpack.prod.conf.js
|-config
|	|-dev.env.js
|	|-index.js
|	|-prod.env.js
|-src
//3以上
|-public
|-src

从上面我们发现了vue-cli3以下创建的项目多出config和build的文件来了，而3以下的代理就要在config里面的index去执行。

//先给大家整理一下思路：项目运行执行yarn serve，可以在package.json里面找到，其实运行的是build里面的webpack.dev.conf.js文件。
"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "serve": "npm run dev",
    "build": "node build/build.js"
},
//跳转到webpack.dev.conf.js文件我们会找到：
const config = require('../config')
devServer：{
    proxy: config.dev.proxyTable,
}
//这里则对应config文件夹的index.js文件。
module.exports = {
    dev：{
    	proxyTable: {
          '/api': {
            target: 'www.api.com',
            changeOrigin: true,
          },
          '/open': {
            target: 'www.open.com',
            changeOrigin: true,
            pathRewrite: {
              '^/open': ''
            }
          },
        },
	}
}
//最后找到了这两个代理，我写的是一个/api代理www.api.com然后/open代理www.open.com两个代理

我们再看vue-cli3以上的代理是怎么写的，官网推荐我们使用devServer

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: '<url>',
        ws: true,
        changeOrigin: true
      },
      '/foo': {
        target: '<other_url>'
      }
    }
  }
}

原理：其实这两位用的都是http-proxy-middleware，完整的文档可以查阅上述连接。

工作遇到的问题

当我配置代理的时候无论是使用3以下的方式还是3以上的方式都不会触发代理请求，我很疑惑，为此我使用node写4000端口的一个api，发现正常访问可以获取数据，但是使用代理就不行。最后找来找去感觉是aixos配置的baseURL导致的。。。但是为什么我还是不太明白

//因为是合并项目的问题，所以后台会有两个，所以我需要代理两个url，
//一开始我是想着配置axios的baseURL为一个对象，但是失败了并且官网上并没有如此的写法。
//后来摒弃默认连接，创建ipConfig文件：
export default {
    dataPlatform:'www.data.com',
    openPlatform:'www.open.com'
}
//不在axios中配置baseURL连接，直接填写url
axios({
    method:'get',
    url:'/api/test'
})
//代理
proxyTable: {
    '/api': {
     target: 'www.data.com',
     changeOrigin: true,
   },
     '/open': {
     target: 'www.open.com',
     changeOrigin: true,
     pathRewrite: {
      '^/open': ''
     }
   },
},
//此操作就是请求访问的就是
www.data.com/api/test这个api接口
这样就解决了一个项目多个后端接口的同代理问题

注意:axios设置了baseURL使用代理的时候会出问题！

其他问题，在部署方面，要在nginx上同时api和open监听，然后跳转data.com或者open.com。