Vue本地https开发环境以及charles映射

vue-cli3 开启https

在vue-config.js中添加

devServer: {
        https:true
}

重启项目后，会有类似下面错误
sockjs.js?9be2:1606 GET https://192.168.53.161:8080/sockjs-node/info?t=1616399587726 net::ERR_CERT_AUTHORITY_INVALID
而且热更新失效，无法即改即看，再添加

devServer: {
        public: 'localhost:8080'//已原先保持一致
}

修复热更新问题。

charles开启映射

在某些情况下，想把线上的https环境映射成本地localhost资源方便开发调试，charles能正常抓取https后（配置方法请自行查找），添加映射规则，比如

QQ截图20210322160518.png

然后测试，会有下面警号信息
failed: WebSocket is closed before the connection is established
或者下面报错
[WDS] Disconnected!
且热更新失效，在vue-config.js中添加

devServer: {
        headers:{ 
            'Access-Control-Allow-Origin':'*'
        },
        hotOnly:false,
        disableHostCheck:true
}

重启项目，问题解决。

vue-cli2 开启https

啦啦啦，自己去找吧