2025-10-12 更新 · 一行命令生成证书 · 支持 ARM/Intel 全系列 Mac

---

一、为什么要本地 HTTPS？

1. 部分 API（WebRTC、ServiceWorker、Secure Cookie）强制 https 才能调通；
2. 避免 Mixed Content 拦截，父页 https → 子资源 https 一步到位；
3. 同一局域网真机调试（手机扫码）也能 https://192.168.x.x 访问。

---

二、macOS 一键生成证书（mkcert 方式）

① 安装 mkcert（Homebrew 最快）

brew install mkcert
# 如果之前装过，先更新
brew upgrade mkcert

② 生成本地 CA（只需做一次）

mkcert -install

• 会把 CA 证书写进 系统钥匙串并设为信任，无需手动双击。

③ 给 localhost & 局域网 IP 颁发证书

# 进入项目根目录
cd ~/Projects/your-vue-app

# 生成两份文件：localhost+127.0.0.1+局域网IP
mkcert localhost 127.0.0.1 ::1 192.168.x.x

成功后得到：

localhost+3.pem   ← 证书（cert）
localhost+3-key.pem ← 私钥（key）

提示：IP 段写你电脑当前局域网 IP，Wi-Fi 换网后重新生成即可。

---

三、Vue 项目配置 https（Vue CLI 版）

vue.config.js 添加如下片段（路径按实际来）：

const path = require('path');
const fs = require('fs');

module.exports = {
  devServer: {
    open: true,
    host: '0.0.0.0',          // 同一局域网可访问
    https: {
      cert: fs.readFileSync(path.resolve(__dirname, 'localhost+3.pem')),
      key:  fs.readFileSync(path.resolve(__dirname, 'localhost+3-key.pem'))
    },
    port: 443                   // 可选，默认 8080
  }
};

启动：

npm run serve
# 浏览器自动打开 https://localhost:443

第一次访问会提示 证书有效（因为系统已信任 mkcert CA），无红锁、无 Mixed Content。

---

四、Vite 项目同理（可选）

vite.config.js 里加：

import fs from 'fs';
import path from 'path';

export default {
  server: {
    https: {
      cert: fs.readFileSync(path.resolve(__dirname, 'localhost+3.pem')),
      key:  fs.readFileSync(path.resolve(__dirname, 'localhost+3-key.pem'))
    },
    host: '0.0.0.0',
    port: 443
  }
};

---

五、同一局域网手机扫码调试

1. 电脑 & 手机连 同 Wi-Fi；
2. 用上面生成的 局域网 IP 证书；
3. 手机浏览器输入：
   https://192.168.x.x:443
   → 无证书警告（mkcert 已信任），即可调试。

---

六、常见问题速查

现象	解决
浏览器仍提示证书无效	确认 mkcert -install 已执行；重启浏览器
换 Wi-Fi 后证书报错	重新执行 mkcert 新IP 并重启 devServer
443 端口被占用	改 port: 3000 或 sudo lsof -i :443 杀掉占用进程

---

七、一句话总结

macOS 下 brew install mkcert → mkcert -install → mkcert localhost IP 三连击，
再把 .pem 文件丢进 vue.config.js 的 https 字段，本地开发秒变 https，
手机扫码也能 https 访问，Mixed Content 从此拜拜。