Vite 本身不直接生成 HTTPS 证书，但支持通过 server.https 配置启用本地 HTTPS；推荐用 mkcert 一键生成受系统信任的证书（如 localhost.pem 和 localhost-key.pem），再在 vite.config.ts 中通过 fs.readFileSync 加载并配置，启动后即可访问 https://localhost:5173 且无浏览器警告。
Vite 本身不直接生成 HTTPS 证书，但支持通过配置 server.https 选项启用本地 HTTPS 服务，关键在于提供有效的 TLS 证书文件（.crt 和 .key）。最常用、最轻量的方式是用 mkcert 工具一键生成受系统信任的本地证书。
安装并信任 mkcert（推荐方案）
mkcert 是专为本地开发设计的工具，能生成被操作系统和浏览器信任的自签名证书，无需手动导入或点击“继续访问”。
- macOS：运行
brew install nss mkcert，再执行mkcert -install - Windows（PowerShell 管理员）：用
choco install mkcert或下载二进制后运行mkcert -install - Linux：按 官方说明 安装依赖并运行
mkcert -install
生成证书并配置 Vite
在项目根目录下运行命令生成证书文件（如绑定 localhost）：
mkcert localhost 127.0.0.1 ::1
会生成 localhost.pem（证书）和 localhost-key.pem（私钥）两个文件。然后在 vite.config.ts（或 .js）中配置：
立即学习“Java免费学习笔记（深入）”；
import { defineConfig } from 'vite'
import fs from 'fs'
export default defineConfig({
server: {
https: {
key: fs.readFileSync('./localhost-key.pem'),
cert: fs.readFileSync('./localhost.pem'),
},
host: 'localhost',
port: 5173,
}
})
注意：fs.readFileSync 需要 Node.js 环境，确保配置文件是 .ts 或 .js（非 .mjs 时需启用 type: "module" 并改用 await import('fs').then(m => m.readFileSync(...))，但通常用 .ts 更稳妥）。
其他可选方式
-
使用 Vite 内置的自动证书：Vite v4.3+ 支持
server.https: true，会自动生成临时证书（但浏览器仍可能提示不安全，因未被系统信任） - 复用已有的证书：如 Nginx 或其他开发环境已有证书，直接指定路径即可，确保权限可读
- 配合代理（如 nginx）反向代理到 HTTP 的 Vite 服务：适合需要统一 HTTPS 入口或复杂路由的场景，但增加本地调试复杂度
验证与常见问题
启动 npx vite 后，控制台应显示 Local: https://localhost:5173/。打开该地址，地址栏应显示锁图标且无警告。
- 如果报错
ERR_SSL_PROTOCOL_ERROR：检查证书路径是否正确、文件是否存在、是否被其他进程占用端口 - 如果提示“证书不受信任”：确认已运行
mkcert -install，并在系统钥匙串/证书管理器中查看mkcert development CA是否已启用信任 - VS Code 或某些终端里运行失败？尝试在纯净终端（如 macOS Terminal、Windows Terminal）中执行
mkcert命令
