vue脚手架—常用配置(vue3+)

一、代理相关

  • 前言:

    • 参考:https://segmentfault.com/a/1190000014474361?utm_source=channel-hottest  或 https://blog.csdn.net/huangjianfeng21/article/details/92005441(推荐比较详细)
    • 注意:代理的匹配越精准 越好,不然 如果页面的url 也匹配到 到,就会把 页面url 也给转发了。
    • 案例【同事出现的问题】:vue-cli 中的 代理就碰到过两次这种 匹配不精准导致的 问题。
      一次是 下面的代理匹配规则,把上面的匹配规则包含了。导致上面的的代理 一直 是用下面的代理转发,导致错误。
      另 外一次是 代理的匹配 规则中 把页面 url 也给匹配进去了,导致 页面 url 发送请求时,也被转发处理了,获取不到正确的页面。 
  • 配置:

    vue-cli 中 webpack的代理使用  :  https://www.jb51.net/article/130509.htm (推荐)
    proxyTable选项是一个代理表(代理服务器是后端的程序,修改 需要重启程序)。前端有路由表,后端有也有路由表,代理也有路由表(即代理表)。
      proxyTable: {
        '/api': {     // 只要在接口中看到 ‘/api‘ 会自动变成我们设置的地址(个人觉得,这里应该是作为匹配请求的地址参数)
          target: 'http://localhost:3000',  (这里是代理接口的位置)
          changeOrigin: true,(允许跨域,如果这不写,调用接口接口时会有跨域错误说缺少请求头)
          pathRewrite: {
            '^/api': ''  // 因为在 ajax 的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'或''
          }   
        }
      }

    npm run dev启动webpack时,命令行中会把对应的代理对应关系显示出来



  • proxy的代理、抓包

    https://blog.csdn.net/a0405221/article/details/85234149 或 https://juejin.im/post/5c6baf776fb9a049f746c335(onProxyReq 请求发送前触发的事件;onProxyRes 请求响应后触发的事件)
    为什么使用这个: webpack是没有日志的,代理某个API接口时,如果调用失败(postman上调用目标接口是有效的)。则无法确认代理后请求的目标地址url是不是正确的,很难排除错误原因。
    但是 通过 onProxyRes 事件就可以知道,当前 ajax请求有没有触发这个代理请求,如果触发了代理请求,可以知道代理后目标服务器的url和请求参数; 如果没有触发请求这个代理请求,要么是没有匹配到代理的字段,要么是被其他的代理字段先匹配到了。比如两个匹配字段 "/api" 和 "/apireq",如果代理的字段是apireq,则会被api这个字段给代理了,触发了 "/api" 的代理事件,但没有触发"/apireq"的代理事件。(亲测 有效)
     proxyTable: {
          '/api1': {
            target: 'https://test.iconntech.com',
            changeOrigin: true,
            pathRewrite: {
              '^/api1': '/'
            },
            onProxyReq: function(onProxyReq, req, res) { // req和res分别是Express框架封装的Request对象和Response对象
    
              console.log('代理字段', '/api1');
              console.log('前端请求url', onProxyReq._headers.origin + req.originalUrl);  // 这里的输出是自己配的,仅做参考
              console.log('目标请求url1', onProxyReq.agent.protocol +"//" + onProxyReq._headers.host + req.url); // 代理配置的target只有host,没有后面的目录
              console.log('目标请求url2', onProxyReq.agent.protocol +"//" + onProxyReq._headers.host + onProxyReq.path); // 代理配置的target,有二级目录
            },
            onProxyRes: function(){
              console.log('2');
            }
          }
        }
  • 动态代理 的实现 : 代理地址改变,不需要重启 webpack。
    • 方案1:代理 地址 使用域名,host文件修改域名绑定的ip地址。【会有限制,公司的电脑没有给你管理员权限,就修改不了host文件。大部分公司是这样的】
    • 方案2: https://blog.csdn.net/sinat_36521655/article/details/111992824 

       思路:要用到的代理地址 全部写到 配置上(一般用 函数实现,代码会简洁些)。项目的src目录中,请求 匹配字段 改变,前端重新编译。请求时,会找到代理中对应的那个代理地址。

      【这种方式,也可以实现不动代码实现,实现切断代理地址。就是加一个按钮,可以切换 项目 中 接口的匹配字段】

      // 把逻辑简化后,就是下面这样的
      const proxy = {
          "/route1": {
              target: targets[name], // 服务器ip1
              changeOrigin: true, // 将跨域服务通过node代理至本地
              ws: true, // 代理websocket
              pathRewrite: {}
          },
          "/route2": {
               target: targets[name], // 服务器ip1
              changeOrigin: true, // 将跨域服务通过node代理至本地
              ws: true, // 代理websocket
              pathRewrite: {}    
          }
      }
      
      module.exports = {
        // ...
        devServer: {
          // ...
          proxy: proxy
        }
      }
    • 方案3【亲测无效,根本没有调用router函数】:使用 proxy下面的 router 参数实现  https://www.cnblogs.com/jwyblogs/p/16292333.html  
                 关键是 router 属性是一个函数,每次调用时通过 readFileSync 读取文件(不是从缓存读取,从硬盘读取的)。所以修改文件后,下次调用就会生效的。
                  http-proxy-middleware文档说明: https://www.jianshu.com/p/a248b146c55a
      module.exports = defineConfig({
          devServer: {
              proxy: {
                  '/': {
                      target: '',
                      ws: false,
                      changeOrigin: true,
                      router: () => {
                          return createProxy();
                      }
                  }
              }
          }
      });

二、本地调试找到源码(默认没有开启)

  • 本地开发环境:在vue.config.js下增加 devtool: 'source-map'
      configureWebpack: {
        // provide the app's title in webpack's name field, so that
        // it can be accessed in index.html to inject the correct title.
        name: name,
        devtool: 'source-map',  // 本地开发,启用source-map
        resolve: {
          alias: {
            '@': resolve('src')
          }
        }
      },

    source-map 和 cheap-module-source-map 生成的map差不多  https://juejin.cn/post/6844903450644316174

  • 线上打包环境:在vue.config.js下设置 productionSourceMap: true 

三、

posted @ 2022-06-24 15:25  吴飞ff  阅读(538)  评论(0编辑  收藏  举报