Vite 中启用 HTTPS 开发服务器的核心是配置 https://localhost:xxx，推荐使用官方插件 @vitejs/plugin-basic-ssl 零配置启用，自动生自签名证书；进阶可选 vite-plugin-mkcert 解决浏览器警告并支持真机调试；手动方式则通过读取 OpenSSL 生成的 key/cert 文件实现定制化控制。
在 Vite 中启用 HTTPS 开发服务器，核心是让本地服务走 https://localhost:xxx，主要适用于调用摄像头、麦克风、WebRTC、PWA 安装、支付 SDK 调试等必须 HTTPS 的场景。配置方式有三种主流路径，按推荐度和实用性排序如下：
推荐方式：用 @vitejs/plugin-basic-ssl（零配置、开箱即用）
这是 Vite 官方维护的轻量插件，适合快速验证和单机开发。
- 安装：
pnpm add @vitejs/plugin-basic-ssl -D（或 npm / yarn） - 在
vite.config.ts/js中引入并注册插件：
// vite.config.ts
import { defineConfig } from 'vite'
import basicSsl from '@vitejs/plugin-basic-ssl'
export default defineConfig({
plugins: [basicSsl()],
})
- 启动后终端会显示
Local: https://localhost:5173/，浏览器访问会提示“证书不受信任”——这是正常现象，可点击“高级 → 继续访问”临时绕过 - 插件自动在
~/.vite-plugin-ssl下生成并缓存自签名证书，无需手动管理
进阶方式：用 vite-plugin-mkcert（解决浏览器警告，支持真机调试）
适合团队协作或需要手机扫码访问本地服务的场景，证书由本地 CA 签发，安装一次后全浏览器/设备免提示。
立即学习“Java免费学习笔记（深入）”；
- 先全局安装 mkcert 工具：
npm install -g mkcert && mkcert -install - 安装插件：
pnpm add vite-plugin-mkcert -D - 配置 vite：
// vite.config.ts
import { defineConfig } from 'vite'
import mkcert from 'vite-plugin-mkcert'
export default defineConfig({
server: { https: true },
plugins: [mkcert()],
})
- 首次运行会自动生成证书并写入系统钥匙串（macOS）、受信任的根证书（Windows）或 ca-certificates（Linux）
- 若需局域网访问（如手机调试），可扩展 hosts：
mkcert(['localhost', '192.168.1.100'])
手动方式：读取本地 key/cert 文件（兼容旧环境或定制需求）
当你已有 OpenSSL 生成的证书，或需要精确控制证书内容（如指定域名、有效期、密钥算法）时使用。
- 用 OpenSSL 生成证书（以 Windows 为例）：
// 命令行执行
openssl genrsa -out localhost.key 2048
openssl req -new -key localhost.key -out localhost.csr -subj "/CN=localhost"
openssl x509 -req -days 365 -in localhost.csr -signkey localhost.key -out localhost.crt
- 把
localhost.key和localhost.crt放到项目/certs/目录下 - 配置 vite：
// vite.config.ts
import { defineConfig } from 'vite'
import { readFileSync } from 'fs'
import { resolve } from 'path'
export default defineConfig({
server: {
https: {
key: readFileSync(resolve(__dirname, 'certs', 'localhost.key')),
cert: readFileSync(resolve(__dirname, 'certs', 'localhost.crt')),
}
}
})
补充要点：让 HTTPS 真正可用
仅配 https: true 或插件还不够，还需注意以下几项：
-
局域网访问：加
host: true或host: '0.0.0.0'，否则手机无法连；终端会同时输出Network: https://192.168.x.x:5173/ -
多域名支持：如需
https://shop.local，用 mkcert 时传入['shop.local', 'localhost']，或 basicSsl 配置hosts: ['shop.local'] -
低版本兼容：Android 5–7 或 iOS 9–11 可能报 TLS 握手失败，建议搭配
@vitejs/plugin-legacy并设targets: ['chrome >= 61']
