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

啦啦啦,自己去找吧

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容