Vue 本地开发启用 https

有些浏览器能力只在安全上下文里可用；本地用 http 调试时它们全部失效，看起来像代码写错了。

什么情况下非开 https 不可

浏览器把 http://localhost 视为安全上下文，但把 http://saas.com、http://192.168.1.10 视为不安全。以下 API 在非安全上下文里直接不可用或抛错：

API	现象
navigator.clipboard	undefined，复制按钮静默失效
navigator.geolocation	回调直接 error，code 1
mediaDevices.getUserMedia	摄像头、麦克风 permission denied
Service Worker	注册报错，PWA 无法调试
crypto.subtle	undefined，加密库初始化失败
部分 Cookie 属性	Secure 标记的 Cookie 不写入

另外有些场景本来就必须走 https：对接微信网页授权、OAuth 回调地址要求 https、后端接口强制 TLS。

开启方式

Vue CLI（webpack）

在 vue.config.js 里改 devServer：

devServer: {
    // development server port 8000
    port: 8210,
    host: 'saas.com',
    https: true,
},

https: true 会让 dev-server 用自签证书启动。浏览器第一次访问会提示「不安全」，点「继续前往」即可；接口请求若是 https 但证书自签，Node 侧可能报 UNABLE_TO_VERIFY_LEAF_SIGNATURE，需要设 NODE_TLS_REJECT_UNAUTHORIZED=0（仅本地）。

Vite

// vite.config.js
import basicSsl from '@vitejs/plugin-basic-ssl';

export default {
  server: {
    host: 'saas.com',
    port: 8210,
    https: true,          // 或用 basicSsl() 插件自动生成证书
  },
};

npm i -D @vitejs/plugin-basic-ssl

用受信任的证书（推荐）

https: true 的自签证书每次都会告警，而且某些 SDK（微信 JS-SDK、支付）只接受受信任证书。用 mkcert 生成一份本机信任的证书更省事：

brew install mkcert
mkcert -install                # 把根证书装进系统钥匙串
mkcert saas.com localhost 127.0.0.1

得到 saas.com+2.pem 与 saas.com+2-key.pem 后指给 dev-server：

// vite.config.js
server: {
  https: {
    key: fs.readFileSync('./certs/saas.com+2-key.pem'),
    cert: fs.readFileSync('./certs/saas.com+2.pem'),
  },
}

host 写域名，先改 hosts

host: 'saas.com' 这类配置依赖本机把域名解析到 127.0.0.1，否则 dev-server 起不来或访问不到：