在 Vite 中启用 HTTPS 需配置 vite.config.ts 的 server.https 选项，使用 mkcert 生成 localhost 证书（localhost.pem 和 localhost-key.pem），通过 fs.readFileSync 读取并设 host 为 'localhost'，再将证书导入系统信任根以避免浏览器警告。
在 Vite 开发环境中启用 HTTPS 并使用自签名证书，核心是配置 vite.config.ts 中的 server.https 选项，指向本地生成的证书文件（.crt 和 .key），同时确保浏览器信任该证书。
生成自签名证书
推荐使用 mkcert 工具——它能生成被系统和浏览器默认信任的本地证书（比 OpenSSL 更省心）：
- 安装：
npm install -g mkcert && mkcert -install（需先装 Go 或使用预编译二进制） - 在项目根目录执行：
mkcert localhost 127.0.0.1 ::1 - 生成两个文件：
localhost.pem（证书）和localhost-key.pem（私钥）
注意：不要提交这些证书到 Git；可加到 .gitignore 中。
配置 Vite 使用 HTTPS
在 vite.config.ts 中设置 server.https 对象：
立即学习“Java免费学习笔记（深入）”；
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
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是必需的——Vite 不接受路径字符串，必须传入Buffer -
host显式设为'localhost'，避免绑定到127.0.0.1导致证书域名不匹配 - 若用
0.0.0.0，需在mkcert命令中加入对应 IP 或域名，并确保证书包含该 SAN
让浏览器信任证书（关键一步）
即使服务跑起来了，Chrome / Edge / Safari 默认仍会拦截自签名 HTTPS 请求：
- macOS：双击
localhost.pem→ 添加到「钥匙串访问」→ 找到该证书 → 右键「显示简介」→ 展开「信任」→ 「当使用此证书时」选「始终信任」→ 输入密码确认 - Windows：右键
.pem→ 「安装证书」→ 选择「本地计算机」→ 存储位置选「受信任的根证书颁发机构」 - Linux（Chrome/Edge）：需手动导入到系统或浏览器证书管理器（如
certutil -d sql:$HOME/.pki/nssdb -A -t "CT,," -n "localhost" -i localhost.pem）
完成后重启浏览器，访问 https://localhost:5173 就不会报「NET::ERR_CERT_AUTHORITY_INVALID」了。
可选：自动证书生成 + 启动脚本
为简化流程，可在 package.json 中添加脚本：
"scripts": {
"dev:https": "mkcert localhost 127.0.0.1 ::1 && vite",
"dev:https:watch": "mkcert -CAROOT ./ca && mkcert -cert-file ./localhost.pem -key-file ./localhost-key.pem localhost 127.0.0.1 ::1 && vite"
}
运行 npm run dev:https 即可一键生成并启动 HTTPS 开发服务器。
