场景

在前端开发中，有些情况需要启用https：

1. 调试摄像头、麦克风等功能 需要https下才允许授权
2. 连接线上正式服务器调试，线上服务器不允许http请求
3. ...

Windows下生成自签名SSL证书

1. 安装OpenSSL

下载地址：https://slproweb.com/products/Win32OpenSSL.html

2. 配置环境变量

配置步骤不细讲，作为开发者环境变量应该已经配过无数遍了

将OpenSSL的bin目录加入系统环境变量PATH，方便命令行直接调用openssl。

也可不配置，直接去bin目录执行命令

3. 生成证书和私钥

打开命令提示符（Win+R，输入cmd，回车），执行以下步骤：

生成私钥

openssl genrsa -out localhost.key 2048

生成证书签名请求（CSR）

openssl req -new -key localhost.key -out localhost.csr

这时会要求输入信息，注意：

Common Name (CN) 必须填写localhost，否则证书不会匹配localhost。

其他信息可随意填写，一路回车即可。

生成自签名证书

openssl x509 -req -days 365 -in localhost.csr -signkey localhost.key -out localhost.crt

这样就在当前目录生成了localhost.key（私钥）和localhost.crt（证书）。

在Vite中配置

把证书和私钥文件放在/certs/下，在vite.config.js中配置

import { defineConfig } from 'vite'
import fs from 'fs'
import path from 'path'

export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'certs/localhost.key')),
      cert: fs.readFileSync(path.resolve(__dirname, 'certs/localhost.crt')),
    },
  }
})