以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,
}