vue本地开发集成https

news/2024/11/16 22:39:09/

背景:在本地项目开发中,调用第三方服务获取音视频通话,音视频通话是采用 WebRTC 来实现的,而 WebRTC 中使用音视频设备进行取流是需要在安全域下才可以调起的设备权限

解决方案:使用npm安装mkcert,配置证书;
mkcert是一个简单的工具,用于制作本地信任的开发证书,有两个命令:

create-ca   //创建证书颁发机构
create-cert    //创建证书(需要先根据 create-ca 命令创建的文件才能创建)

npm安装mkcert

npm i mkcert -g

生成ca证书

cd [项目目录]
mkdir keys    //新建文件夹保存证书
cd keys
mkcert create-ca [options]     //options 参考npm 文档,可以直接使用默认值

在这里插入图片描述
根据ca证书生成cert证书,domains后面为ip,配置本机ip,用逗号隔开

mkcert create-cert --domains 127.0.0.1,localhost,192.168.82.227

在这里插入图片描述
在这里插入图片描述
此时项目目录下会生成 4 个文件,密钥是cert.key文件,证书是cert.crt文件
安装证书
进入keys文件夹双击ca.crt,在弹出的对话框中点击“安装证书”
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
vue.config.js中配置

  const https = require('https');const fs = require('fs');module.exports = {devServer: {https: {cert: fs.readFileSync(path.join(__dirname, 'keys/cert.crt')),key: fs.readFileSync(path.join(__dirname, 'keys/cert.key'))}}}

启动项目
在这里插入图片描述


http://www.ppmy.cn/news/814910.html

相关文章

面试官常问的一些初中级前端知识点

CSS 1. 介绍下 CSS 盒子模型 回答到以下两点就可以: 一个盒子由四个部分组成:content、padding、border、margin。两种盒子模型:W3C 标准盒子模型、IE 怪异盒子模型标准盒子模型 width / height 只是内容高度,不包含 padding 和…

苹果备忘录怎么调字体大小_苹果备忘录误删了怎么恢复?你要知道这个办法

苹果备忘录误删了怎么恢复?苹果手机删除备忘录怎么恢复?很多小伙伴都会用iPhone备忘录记录临时事项以及一些未来计划的习惯,因此备忘录的内容越来越重要,而备忘录删除如何恢复,也困扰了越来越多iPhone用户。所以小编今…

苹果备份与恢复_短信删除了怎么恢复?这个办法你要学会

短信删除了怎么恢复?不少朋友最近咨询小编,不小心把短信删掉了怎么办?小编稍稍动了一下脑筋,想起了一个好办法~这就来给大家介绍一下。 短信是一种删除了就无法直接从手机上恢复的数据项,这时候,我们可以先…

怎样找回删除的微信好友?不用ROOT,不用数据恢复软件!而且免费!

今天我们分享一下怎样找回删除的微信好友?这个方法我认为是门槛、成本最低的方法,不需要ROOT,不使用任何数据恢复软件,操作简单,即使你换了手机依然可以找回删除的好友(与手机无关),…

苹果6s怎么导出照片_苹果照片删除怎么恢复?不知道这个办法你就亏了

苹果照片删除怎么恢复?小编最近发现,手机里的照片都已经要有接近2k的量了,强迫症突然让小编一狠心清除了一半的照片,结果出了大问题,重要的一份录像没有了!小编可急坏了,这时,小编的…

删除文件恢复软件?只需2个步骤

不小心删除了电脑的文件,不管是回收站点击还原恢复,还是Windows系统备份还原都通通不管用。那如何解决这个问题?这时您需要寻求一款删除文件恢复软件的帮助,比如数据蛙数据恢复专家软件。为什么推荐它呢?您可以看看这篇…

iphone恢复删除的文件-不要钱!

本人的目标是恢复备忘录,以此为例。 案情还原: os10以上,备忘录中有icloud的备忘录,可以同步icloud的,我的iphone的备忘录在云端上看不见,然后我就想同步过去。 按一个操作说的,把我的iphone上…

苹果备份与恢复_苹果恢复数据有哪些可以选择的途径?

手机是我们日常不可或缺的工具,同时也是记录我们生活点滴的重要道具。今天和大家谈谈如何恢复苹果的数据,尤其是恢复被删除掉的苹果数据。 由于苹果的平台有别于一般,所以在操作起来也需要相当的知识和工具。而一般常会出现的需要恢复苹果数据…