Vite配置SSL证书分两类：快速启用用@vitejs/plugin-basic-ssl插件实现本地HTTPS但浏览器仍警告；真正可信需用mkcert生成并安装本地根证书，再配置server.https指向pem与key文件。
在 Vite 开发环境中配置 SSL 证书，核心目标是让本地服务跑在 https://localhost 上，并避免浏览器反复提示“不安全连接”。实现方式分两类：快速启用（适合调试）和真正可信（适合跨设备、摄像头、PWA 等场景）。
用 @vitejs/plugin-basic-ssl 快速启用 HTTPS
这是最轻量的方式，适合仅需本地 HTTPS 协议行为验证（比如测试 fetch 跨域逻辑、跳转协议判断），不追求浏览器完全信任。
- 安装插件：
npm install @vitejs/plugin-basic-ssl -D - 在
vite.config.ts或vite.config.js中引入并注册：import { defineConfig } from 'vite';<br>import basicSsl from '@vitejs/plugin-basic-ssl';<br><br>export default defineConfig({<br> plugins: [basicSsl()],<br>}); - 启动后自动切换为
https://localhost:5173，但浏览器仍会显示证书警告（因使用自签名证书，系统未信任其根 CA）
用 mkcert 实现浏览器完全信任
当你需要调用 getUserMedia（摄像头/麦克风）、Service Worker、或在企业微信、iOS Safari 等严格环境调试时，必须让浏览器认可证书——mkcert 是目前最可靠、跨平台的方案。
- 安装 mkcert 工具：
macOS：brew install mkcert；Windows：下载mkcert-v1.4.4-windows-amd64.exe并重命名为mkcert.exe加入 PATH；Linux：sudo apt install libnss3-tools后按官方指南编译 - 安装本地根证书（只需一次）：
mkcert -install，系统会提示输入密码并完成信任设置 - 在项目目录生成证书文件：
mkcert localhost 127.0.0.1 ::1，生成localhost.pem和localhost-key.pem - 在 Vite 配置中读取并注入：
import { readFileSync } from 'fs';<br><br>export default defineConfig({<br> server: {<br> https: {<br> key: readFileSync('./localhost-key.pem'),<br> cert: readFileSync('./localhost.pem'),<br> },<br> },<br>});
补充说明：证书路径与多域名支持
如果需通过局域网 IP（如 https://192.168.1.100:5173）访问，mkcert 命令要包含该 IP：mkcert localhost 127.0.0.1 192.168.1.100。生成的证书才能被对应地址信任。
立即学习“Java免费学习笔记（深入）”；
若使用 @vitejs/plugin-basic-ssl 插件但仍想扩展 hosts，可传入配置：
basicSsl({<br> hosts: ['localhost', '192.168.1.100'],<br> certDir: './cert'<br>})
这样插件生成的证书会包含多个 SAN 条目，减少部分警告，但依然无法绕过系统根信任要求。
注意：server.https: true 不够用
仅设 server.https: true 会让 Vite 内部调用 plugin-basic-ssl，但本质仍是自签名证书，浏览器依旧报错。它不能替代 mkcert 的根证书安装步骤。真正解决证书警告，关键不在“有没有证书”，而在于“谁签发的、系统认不认识这个签发者”。
