Vue开发环境devServer proxy规则被忽略？静态站跳转未代理到本地8080

现有配置完全不生效的核心原因 #

• devServer的代理规则本质是拦截本地devServer服务接收的、以当前本地域名为源的同源路径请求，所有匹配逻辑仅针对请求的路径部分，无法拦截浏览器直接发起的跨域全量绝对地址跳转请求。
• 落地页Login按钮配置的href="https://mysubdomain.mydomain.com"为完整公网绝对地址，浏览器点击时会直接跳出localhost的运行上下文，直接向公网生产域名发起请求，整个流程的请求不会经过本地devServer的网络栈，代理规则从一开始就没有机会捕获这类请求，无论调整匹配写法、增加secure: false参数都不会产生作用。
• 此前配置的'https://mysubdomain.mydomain.com'类代理匹配规则本身为无效写法：devServer接收到的所有请求的路径段，永远不会携带外部域名的完整前缀，这类规则从匹配逻辑上就不可能命中任何实际请求。此前尝试的^/mysubdomain.mydomain.com类规则同样不生效，因为按钮跳转地址根本不指向这类自定义路径，请求根本不会走到devServer的代理逻辑。

可行的实现路径 #

方案一（推荐，改动最小无额外系统配置） #

• 移除前端代码中写死的公网绝对地址，将Login按钮的href修改为devServer可识别的相对路径，例如/webapp/login
• 调整vue.config.js中的proxy规则，匹配该自定义相对路径并转发到本地8080端口的web应用服务，参考配置：

module.exports = {
  transpileDependencies: ["vuetify"],
  devServer: {
    port: 80,
    proxy: {
      "/webapp": {
        target: "http://localhost:8080",
        changeOrigin: true,
        // 可选：当不需要将路径前缀传递给后端时，配置pathRewrite移除前缀
        pathRewrite: { "^/webapp": "" }
      }
    }
  }
}

• 配置生效后，点击Login按钮时浏览器会向当前localhost（80端口）的/webapp/login路径发起请求，该请求会被devServer代理规则捕获并转发到本地8080端口的web应用服务，不会请求公网生产域名。

方案二（不修改前端代码的替代路径） #

• 若完全不想修改前端写死的href地址，仅靠devServer proxy无法实现需求。需要修改本地hosts文件，将mysubdomain.mydomain.com域名解析指向127.0.0.1，再在本地80端口的服务中匹配该域名的请求并转发到8080端口。这种方式需要处理hosts修改权限、HTTPS自签证书信任等额外问题，操作成本远高于方案一。

明确结论 #

仅通过调整现有devServer proxy的参数配置，无法实现目标跳转的代理效果
当href指向跨域绝对地址时触发的跳转，不会被devServer proxy处理，核心原因是这类请求不经过本地devServer的网络处理流程

内容的提问来源于stack exchange，提问作者Half_Duplex