vite本地开启https调试的核心是通过server.https配置项加载mkcert生成的可信证书文件。需先安装mkcert、执行mkcert -install初始化ca，再运行mkcert localhost 127.0.0.1 ::1生成pem和key文件，最后在vite.config.ts中用fs.readfilesync指定证书路径完成配置。
Vite 本地开启 HTTPS 调试，核心是通过 server.https 配置项加载证书文件，不需要额外插件。
准备本地 HTTPS 证书
开发环境通常用自签名证书。推荐用 mkcert 工具生成可信证书（浏览器不报“不安全”）：
- 安装 mkcert：
brew install mkcert（macOS）或按官网说明安装（Windows/Linux） - 初始化本地 CA：
mkcert -install - 生成证书：
mkcert localhost 127.0.0.1 ::1，会输出localhost.pem和localhost-key.pem - 把这两个文件放到项目根目录或
cert/子目录下（例如cert/localhost.pem和cert/localhost-key.pem）
在 vite.config.ts/js 中配置 https
直接在 Vite 配置的 server 选项中传入证书路径：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
server: {
host: 'localhost',
port: 3000,
https: {
key: './cert/localhost-key.pem',
cert: './cert/localhost.pem',
// ca: './cert/localhost-rootCA.pem' // 如果用了中间 CA，可选
}
}
})
注意：路径是相对于项目根目录（即 vite.config.ts 所在位置），建议用相对路径；key 和 cert 必填，ca 一般不用加。
启动时自动打开 HTTPS 地址
Vite 启动后默认仍显示 http:// 地址。可在配置中加 open: true 并配合脚本自动跳转：
- 确保
server.https已正确配置 - 启动命令保持不变：
npm run dev - 控制台会显示
Local: https://localhost:3000/（不是 http） - 如果浏览器没自动打开，手动访问
https://localhost:3000即可（首次可能需点击“高级→继续访问”）
常见问题处理
遇到报错或不生效，重点检查这几处：
-
证书路径错误：用绝对路径临时验证，比如
key: require('fs').readFileSync(path.resolve(__dirname, 'cert/localhost-key.pem')) -
权限问题（macOS/Linux）：确保
.pem文件可读，运行chmod 600 cert/*.pem -
端口被占用：HTTPS 默认也用
port值（如 3000），不是 443；若想用 443，需管理员权限启动 -
Chrome 提示 NET::ERR_CERT_AUTHORITY_INVALID：确认已执行
mkcert -install，且证书确实是它生成的
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
