前端开发本地搭建https环境

一些api只有在https下才能正常使用，比如： getUserMedia； 为了方便开发调试，搭建本地https

以vue-cli 项目为例

windows:
1、以管理员身份打开 powershell
2、修改命令执行策略

Set-ExecutionPolicy -ExecutionPolicy Bypass

y 回车

3、安装chocolatey

iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))

4、验证是否安装成功

choco

5、安装 mkcert

choco install mkcert

6、验证是否成功

7、利用 mkcert 生成证书
我这里同时生成了两个域名的证书，多个域名用空格隔开

 mkcert -install
 mkcert localhost 192.168.2.102

l文件已经生成，在命令执行位置, 有两个文件


将文件复制到项目的根目录下，并复制 .pem文件，把后缀改为.crt，一共三个文件

然后在 vue.config.js中

const fs = require("fs");
module.exports = {
	devServer: {
        https: true,
        // key: fs.readFileSync('/path/to/server.key'),
        // cert: fs.readFileSync('/path/to/server.crt'),
        ca: fs.readFileSync('192.168.2.102+1.pem'),
        key: fs.readFileSync('192.168.2.102+1-key.pem'),
        cert: fs.readFileSync('192.168.2.102+1.crt'),
    }
 }

然后重启项目，即可。浏览器会提示证书，直接信任就完事了