vue.config.js配置https未加ssl证书报错/socket-node/info net::ERR解决方案

vue.config.js配置https未加ssl证书报错/socket-node/info net::ERR解决方案

记录一波，查阅资料流程

背景：因为开发直播间用到TRTC SDK，在web端调试要么http:localhost:port、https:ip:port
直播黑盒测试，采用最接近真实的测。一台电脑肯定不够，要么内网穿透，要么局域网，无论哪种方式都逃不掉https协议！

• 我原本的vue.config.js有关https的配置

  module.exports = {
    devServer: {
      https: true
    }
  }
  

  其他的各种loader无需关心。

  报错内容：::net ERROR_AUTHORIZE忘了错误具体名称，反正意思就是https未授权，没有配置ssl证书

• 参考文章：Vue 项目运行报错 sockjs-node/info 的解决方案

• 一般正式上线肯定会采用nginx + ssl配置https协议

• 采用的解决方案：绕过主机检查（webpack官方提示：不建议这样做，容易DNS工具，开发测试而已，不用管）

    devServer: {
      https: true,
        
      // 方式一：
      disableHostCheck: true,
      port: "8081"
      
      // 方式二：
      // public: 'localhost:8081', // 解决开启https后本地允许热更新，缺点：只允许本地访问，无法局域网内访问
    },
  

  如果你不想网页展示不安全字样，参考扩展方式配置本机ssl证书

• 拓展方式：本机生成ssl并配置到webpack-dev-server上即可

  参考webpack中文版 or 官网

  • 生成证书的方式：
    1. openssl
    2. mac 使用mkcert 在前端本地环境配置 HTTPS 证书

我采用的方式对我的本地dev环境是可行的，如果不行可以采用拓展方式，或者百度其他方式