Windows环境下vscode Live Server插件如何开启https


0x01 vscode http插件 Live Server如何开启https

在本机端的开发环境下,如果要测试一些需要HTTPS的功能可以使用mkcert给自己颁发凭证

 

 

0x02 安装步骤如下:

1、安装 mkcert

安装环境:Windows 7+ / Windows Server 2003+

1)以管理员身份运行powershell

2)执行命令: Get-ExecutionPolicy,如果系统返回 Restricted,则在执行命令:Set-ExecutionPolicy AllSigned ,选择 A(全是)

3)执行命令:

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

4)等待数秒,安装完成

5)执行choco -?验证是否安装成功 

     具体详细安装方法见:https://chocolatey.org/install

     安装完成后,执行命令 choco install mkcert,等待安装完成。

 

2、安装本地CA

将本地CA 加入系统的信任清单内:

执行命令  mkcert -install 

显示下面结果,安装完成

Created a new local CA at "C:\Users\**\AppData\Local\mkcert" 💥 The local CA is now installed in the system trust store! ⚡️

 

3、生成凭证

 

mkcert example.com "*.example.com" example.test localhost 127.0.0.1 ::1

返回:

Using the local CA at "C:\Users\**\AppData\Local\mkcert" ✨ Created a new certificate valid for the following names 📜(对应以下信任域名) - "example.com"
 - "*.example.com"
 - "example.test"
 - "localhost"
 - "127.0.0.1"
 - "::1" Reminder: X.509 wildcards only go one level deep, so this won't match a.b.example.com ℹ️ The certificate is at "./example.com+5.pem" and the key at "./example.com+5-key.pem"

在当前文件夹内生成2个文件:

example.com+5.pem 和 example.com+5-key.pem
分别是证书文件和私钥

4、设置live server

开启 settings.json 配置文件,输入以下内容,并将cert, key 的路径修改为刚刚创建的文件路径

 

"liveServer.settings.https": { "enable": false, //set it true to enable the feature. "cert": "D:\\https\\example.com+5.pem", //full path "key": "D:\\https\\example.com+5-key.pem", //full path "passphrase": "" },

 

具体参考:https://github.com/ritwickdey/vscode-live-server/blob/master/docs/settings.md

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM