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。生成的证书才能被对应地址信任。
若使用 @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 的根证书安装步骤。真正解决证书警告,关键不在“有没有证书”,而在于“谁签发的、系统认不认识这个签发者”。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











