vue-cli 开发vue项目， 代理的配置

以vue-cli脚手架搭建出来的vue开发环境，在配置本地代理的过程中，一般是通过log信息来查看是否配置成功，最开始我也是这么想的，并且查看了很多网上文档，但是我在配置完，发现log并没有任何输出

'/__proxy': {
    target: targetUrl,
    pathRewrite: { '^/__proxy': '/api' },
    changeOrigin: true,
     logLevel: "debug",
    secure: false,
  },

如上图中的配置，代理转发的log并没有像想的那样输出来。所以就想如何来调试配置文件中的配置是否正确。调试就是使用node命令行进行js的调试，调试命令如下,

node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve --progress

其实就是package.json文件中的serve命令，把这条命令以debug的方式加入到scripts中，后面就可以使用npm run debug常用方式来启动调试了(当然也可以直接运行node本身这条命令);

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "inspect": "vue-cli-service inspect",
    "debug": "node --inspect-brk ./node_modules/@vue/cli-service/bin/vue-cli-service.js serve --progress"
  },

调试过程中，发现log输出不掉,是被vue.config.js配置文件中的配置项configureWebpack对象下的infrastructureLogging.debug来控制,如下图(文件在node_modules/webpack/lib/logging/createConsoleLogger.js文件里头),该函数使用了配置文件来初始化level、debug参数，标识3里头直接被const debug = debugFilters.some(f => f(name));的本地debug来过滤了，这个本地参数受到了标识1中debug参数的影响

 ，下面看下函数中的debug参数是如何被初始化的。如下图（文件在node_modules/webpack/lib/node/NodeEnvironmentPlugin.js），启动调试的时候，createConsoleLogger函数被调用,初始化了参数debug(infrastructureLogging.debug来初始化它的，也就是上面说的配置文件中的)

infrastructureLogging对象下还有一些字段是用来控制log输出的，默认infrastructureLogging.debug被设置为false,这里我把它设置为true,之后，大量的log就可以输出出来了。

configureWebpack：{
    infrastructureLogging:{
      debug:true,
    }
}

，经过修改配置，log顺利输出。

但是代理中的配置是如何去匹配代理路径的呢？我们重新启动调试。

在跟踪配置加载过程中，发现了如下代码（文件在node_modules/@vue/cli-service/lib/commands/serve.js），

 跟踪进入，Object.keys对这个proxy的代理配置进行了遍历处理，通过createProxyEntry函数对每个代理进行了代理的处理对象创建，

进入createProxyEntry函数，

 

在函数里头context参数就是'/__proxy'这个路径,

 

 createProxyEntry会为每一个这种配置创建一个代理处理对象，pathname.match(context)就是运行过程中用来查找路径代理的匹配，发现这个匹配是一个正则表达式,把上面的路径改成'^/*\\w*/__proxy' ，/test/__proxy或__proxy是不是都可以匹配到这个正则表达式，所以我们配置代理最简单的方式就是下面的配置，只要'^/*\\w*/__proxy'正则能匹配上的，都可以通过这个配置来进行url的路由转换（这里的targetUrl，是服务器的地址）

'^/*\\w*/__proxy': {
    target: targetUrl,
    pathRewrite: { '^/*\\w*/__proxy': '/api' },
    changeOrigin: true,
     logLevel: "debug",
    secure: false,
  }