Vue 3与.NET Core 3.1热模块重载（HMR）异常排查求助

问题原因分析 #

你遇到的ERR_SSL_PROTOCOL_ERROR和WDS断开问题，核心是协议不匹配+代理冲突：

• .NET Core应用运行在HTTPS（https://localhost:5001），浏览器访问页面时强制使用HTTPS协议；但Vue CLI内置的Webpack Dev Server（WDS）默认用HTTP（http://localhost:8080），浏览器会阻止HTTPS页面访问HTTP端点的"混合内容"请求，导致热重载的WebSocket连接失败。
• 你同时配置了Vue的devServer.proxy和.NET Core的UseVueCli，两个代理机制互相冲突——UseVueCli已经会让.NET Core转发前端请求到Vue Dev Server，而Vue的proxy又把请求转回.NET Core，打乱了热重载的连接路径。

解决方案步骤 #

1. 调整Vue配置，移除冲突代理并启用HTTPS #

修改vue.config.js，删除原有的proxy配置，改为让Vue Dev Server使用HTTPS，和.NET Core协议保持一致：

module.exports = {
  devServer: {
    https: true, // 启用HTTPS，消除协议不匹配问题
    port: 8080 // 保持默认端口，可按需修改
  }
}

2. 更新.NET Core的VueCli代理配置 #

在Startup.cs的UseSpa方法中，明确传递参数让Vue CLI以HTTPS启动，确保.NET Core能正确代理到Vue的HTTPS Dev Server：

app.UseSpa(spa =>
{
    if (env.IsDevelopment())
    {
        spa.Options.SourcePath = "ClientApp";
        // 指定Vue CLI启动时启用HTTPS
        spa.UseVueCli(npmScript: "serve", npmOptions =>
        {
            npmOptions.Arguments = "--https --port 8080";
        });
    }
    else
    {
        spa.Options.SourcePath = "dist";
    }
});

3. 信任自签名证书（可选） #

如果Vue Dev Server使用自签名证书，浏览器可能提示不安全：

• 先单独访问https://localhost:8080，手动信任证书后再回到https://localhost:5001；
• 或者在vue.config.js中配置自定义证书（如果你有现成的证书文件）：

  const fs = require('fs');
  module.exports = {
    devServer: {
      https: {
        key: fs.readFileSync('./path/to/localhost.key'),
        cert: fs.readFileSync('./path/to/localhost.crt')
      },
      port: 8080
    }
  }
  

效果说明 #

• 让Vue Dev Server和.NET Core统一使用HTTPS，消除了混合内容的SSL错误；
• 依靠.NET Core的UseVueCli完成请求转发，确保所有请求都走同一个域名（https://localhost:5001），无需启用CORS；
• 热重载的WebSocket连接会通过.NET Core代理到Vue的HTTPS Dev Server，WDS能正常保持连接，热模块重载功能恢复。

你不需要额外安装Webpack，Vue CLI的内置模板已经包含了完整的Webpack和WDS环境，只需调整上述配置即可解决问题。

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