Webpack 如何修复这些SockJS ssl错误？

有了vue cli 3，我就有了一个vue应用程序，它在开发模式中呼呼作响。我叫npm跑发球，我知道

DONE  Compiled successfully in 431ms                                                                                                                                                                   
16:26:43
App running at:
- Local:   http://localhost:8080/mobileapp/v/
- Network: http://172.18.55.202:8080/mobileapp/v/

（路径

/mobileapp/v/

来自baseUrl配置变量。域notilusdev.dimosoftware.com/mobileapp指向iis中的vdir，对/mobileapp/v/的请求被反向代理到webpack开发服务器）

在浏览器中，应用程序启动没有问题。然后它开始向

https://172.18.55.202:8080/sockjs-节点/info？t=1529072806971

。这些请求失败，因为该端口上没有ssl。我甚至不想把ip作为网站的公共地址。Webpack（或sockjs）如何构造这个url？当它给我一个直接的http链接时，为什么它认为这个端口上有ssl？如果它基于地址栏协议，为什么它会忽略地址栏主机名。我可以配置什么以使这些请求成功

---

web套接字根据配置的URL推断架构

您需要明确地向devServer配置提供

密钥/cert/pem？

，以支持此功能。否则，它将尝试使用自签名证书，当然，这在您的情况下是不起作用的

devSever: {
  ...,
  key: fs.readFileSync('/path/to/server.key'),
  cert: fs.readFileSync('/path/to/server.crt'),
  ca: fs.readFileSync('/path/to/ca.pem'),
}

这将使用正确的SSL并解决您的问题

作为旁注

---

您也不能决定不对websocket连接使用

https

。但是，如果您不想经历这一过程，您可以完全不使用HTTPS，而是像往常一样使用

localhost:8081

。

这是一场斗争，但它现在正在工作

将

public

属性添加到vue.config中的

devServer

对象。

我需要的属性是

public

，而不是

publicPath

，而且客户了解到vue将忽略

configureWebpack{devServer:{

中的配置更改。您需要使用顶级

devServer

属性

所以我的工作vue.config.js是

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '\/mobileapp\/v\/',
    devServer :{
      public : 'notilusdev.dimosoftware.com',
      host : '0.0.0.0',
      disableHostCheck : true
    }  
}

---

然后，我需要通过express反向代理https和wss://请求，终止express中的ssl，但这是另一回事。

我不熟悉这一点。我的spa需要集成到现有的asp.net应用程序中（向浏览器提供相同的https来源），所以我在IIS上配置了一个反向代理，将spa请求转发到webpack dev服务器。这就是为什么在屏幕截图中，您会看到

https://notilusdev...

在地址栏中。因此，我能看到的唯一解决方法是让HMR请求遵循相同的管道，请求发送到

https://notilusdev...

，SSL终止于IIS，未加密的请求转发到Web包开发服务器。这可行吗？对于快速浏览并在本地使用localhost的人来说，这是帮助我添加此“公共”的关键部分属性设置为vue.config.js中的devServer属性：

public:'http://localhost:8080“

我同样对你的另一个故事感兴趣：）你能详细说明一下吗。@AnandRockzz要想在开发中使用ssl，或者让你的spa在开发中与你的传统应用程序共享一个来源，我发现最简单的解决方案是将express放在ev前面任何事情，然后反向代理到webpack。你需要掌握的三个技巧是，和。@AnandRockzz问一个问题（并通知我），如果你想让我发布我的工作express脚本。我正在使用apache代理服务于我的开发服务器，此配置工作正常，谢谢：）