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