vite项目配置本地开发使用https访问

在Vite项目中启用HTTPS以安全地使用navigator.mediaDevices.getUserMedia()

引言

在现代Web开发中，保护用户隐私和数据安全是至关重要的。特别是在涉及到媒体捕获功能，如使用用户的摄像头或麦克风时，Web应用需要遵循严格的安全准则。navigator.mediaDevices.getUserMedia() 方法允许网页直接访问用户的媒体输入设备，但出于安全考虑，这一功能通常要求在HTTPS环境下运行。如果你正在使用Vite作为你的开发服务器，并希望在本地开发过程中测试这一功能，那么配置Vite以支持HTTPS访问就变得尤为重要。

为什么需要HTTPS？

• 安全性：HTTPS通过SSL/TLS协议加密了客户端和服务器之间的通信，防止了数据在传输过程中被窃听或篡改。
• 兼容性：许多现代Web API，包括getUserMedia()，都要求在HTTPS环境下才能使用，以确保用户数据的安全。
• 信任：使用HTTPS可以增强用户对网站的信任，特别是对于需要处理敏感信息的网站。

Vite项目中配置HTTPS

我是借鉴这位大佬的用了它的第一中方式，在此记录一下：vite项目配置本地开发使用https访问，3分钟搞定

方案1

使用插件@vitejs/plugin-basic-ssl

1. 安装

pnpm i @vitejs/plugin-basic-ssl

2. 在vite.config.js中配置
   
   重启项目，就会有https的地址