Vue3 + Vite 局域网 HTTPS 访问实战：手机秒连本地开发环境
痛点直击：移动端开发调试时，是否经常被这些问题困扰？
- 需要 HTTPS 才能调用的 API（摄像头、地理位置、支付等）在局域网无法测试
- 手机需测试PWA是否生效，测试环境却是http。
…
今天分享一个零配置、一键开启的解决方案 ——@vitejs/plugin-basic-ssl，让你的 Vue3 项目在局域网内秒变 HTTPS！
一、为什么需要 HTTPS 局域网访问？
1.1 现代 Web API 的 HTTPS 要求
很多现代浏览器 API 出于安全考虑，强制要求 HTTPS 环境：
| API 功能 | HTTPS 要求 | 典型应用场景 |
|---|---|---|
getUserMedia(摄像头/麦克风) | ✅ 必须 | 视频通话、扫码识别 |
Geolocation(地理位置) | ✅ 必须 | 地图定位、附近推荐 |
Service Worker | ✅ 必须 | PWA 离线应用 |
Payment Request | ✅ 必须 | 在线支付 |
Clipboard | ✅ 必须 | 复制粘贴功能 |
Notifications | ✅ 必须 | 消息推送 |
1.2 移动端调试的刚需
开发移动端 H5 页面时，我们需要：
- 📱真机测试：模拟真实用户环境
- 🔄热更新：保存代码手机实时刷新
二、实战配置：三步搞定 HTTPS
步骤 1：安装插件
npminstall@vitejs/plugin-basic-ssl-D# 或yarnadd@vitejs/plugin-basic-ssl-D# 或pnpmadd@vitejs/plugin-basic-ssl-D步骤 2：配置 Vite
修改vite.config.js：
import{defineConfig}from"vite";importbasicSslfrom"@vitejs/plugin-basic-ssl";exportdefaultdefineConfig({plugins:[// ... 其他插件basicSsl(),// ← 就这一行！],server:{port:81,host:true,// ← 允许局域网访问https:true,// ← 开启 HTTPSopen:true,},});关键配置解析：
host: true—— 监听所有网络接口，允许外部设备访问https: true—— 启用 HTTPS 协议basicSsl()—— 自动生成并管理自签名证书
步骤 3：启动并访问
npmrun dev# 或yarndev控制台会输出类似信息：
VITE v6.x ready in 300 ms ➜ Local: https://localhost:81/ ➜ Network: https://192.168.1.100:81/ ← 手机访问这个地址！ ➜ press h + enter to show helpPC端：
手机访问步骤：
- 确保手机和电脑连接同一 WiFi
- 手机浏览器输入
https://192.168.1.100:81 - 首次访问会提示证书不受信任，点击「继续访问」即可
五、常见问题与解决方案
Q1：手机提示「证书不受信任」怎么办？
这是正常现象，因为使用的是自签名证书。解决方案：
- Android：点击「高级」→「继续前往」
- iOS：设置 → 通用 → 关于本机 → 证书信任设置 → 启用证书
Q2：防火墙阻止访问？
确保电脑防火墙允许 Node.js 通过：
- Windows：控制面板 → 防火墙 → 允许应用通过 → 勾选 Node.js
- Mac：系统设置 → 网络 → 防火墙
Q3：热更新在手机上不生效？
检查vite.config.js中的host配置：
server:{host:'0.0.0.0',// 明确指定监听所有地址// 或host:true,}这个方案最适合个人开发调试和小团队协作，让你的移动端开发效率翻倍！