vue本地开发集成https

背景:在本地项目开发中,调用第三方服务获取音视频通话,音视频通话是采用 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.hqwc.cn/news/23345.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

系统架构设计师 8:系统质量属性与架构评估

软件系统属性包括功能属性和质量属性,软件架构重点关注的是质量属性。为了精确、定量地表达系统的质量属性,通常会采用质量属性场景的方式进行描述。 在确定软件系统架构,精确描述质量属性场景后,就需要对系统架构进行评估。软件…

自定义指令directives:防抖,节流,element-ui的无限滚动在el-table上使用的封装

vue官网对于自定义指令的介绍 添加链接描述 除了核心功能默认内置的指令 (v-model 和 v-show),Vue 也允许注册自定义指令。注意,在 Vue2.0 中,代码复用和抽象的主要形式是组件。然而,有的情况下,你仍然需要对普通 DOM…

配置Hadoop_0

配置Hadoop_0 1配置Hadoop100模板虚拟机1.1配置Hadoop100模板虚拟机硬件1.2配置Hadoop100模板虚拟机软件1.3配置Hadoop100模板虚拟机IP地址1.4配置Hadoop100模板虚拟机主机名称/主机名称映射1.5配置Hadoop100模板虚拟机远程操作工具 1配置Hadoop100模板虚拟机 Hadoop100 内存…

Postman+Newman+Git+Jenkins+Slack 接口自动化和监控

目录 前言: 一、Newman 介绍: 1、简介 2、安装 3、检查 4、运行 二、Newman 命令行介绍: newman run [options] 测试结果配置 ------------------------------------分 割 线----------------------------------------------------…

Linux中makefile

第一个版本的makefile Makefile的依赖是从上至下的,换句话说就是目标文件是第一句里的目标,如果不满足执行依赖,就会继续向下执行。如果满足了生成目标的依赖,就不会再继续向下执行了。 Make会自动寻找依赖条件所用到的文件&…

【运维工程师学习五】数据库之MariaDB

【运维工程师学习五】数据库 1、常用的关系型数据库2、C/S结构3、MariaDB图形客户端4、安装MariaDB5、启动MariaDB及验证启动是否成功6、验证启动——端口7、验证启动——进程8、MariaDB配置文件路径主配置文件解读: 9、MariaDB的配置选项10、MariaDB客户端连接1、在…

[java安全]CommonsCollections3.1

文章目录 【java安全】CommonsCollections3.1InvokerTransformerConstantTransformerChainedTransformerTransformedMap如何触发checkSetValue()方法?AnnotationInvocationHandlerpoc利用链 【java安全】CommonsCollections3.1 java开发过程中经常会用到一些库。Ap…

Docker架构

目录 Docker总架构图Docker ClientDocker DaemonDocker ServerDocker EngineJob Docker RegistryGraphDriverGraphDriverNetworkDriverExecDriver LibcontainerDocker Container Docker可以帮助用户在容器内部快速自动化部署应用,并利用Linux内核特性命名空间&#…

JMeter websocket接口测试

前言 在一个网站中,很多数据需要即时更新,比如期货交易类的用户资产。在以前,这种功能的实现一般使用http轮询,即客户端用定时任务每隔一段时间向服务器发送查询请求来获取最新值。这种方式的弊端显而易见: 有可能造…

ORB-SLAM2学习笔记1之Ubuntu20.04+ROS-noetic安装ORB-SLAM2

文章目录 0 引言1 安装依赖1.1 opencv安装1.2 Eigen3安装1.3 Pangolin安装1.4 其他 2 编译安装ORB-SLAM22.1 build.sh2.2 build_ros.sh 0 引言 ORB-SLAM2是一种用于单目、双目和RGB-D相机的视觉SLAM(同时定位与地图构建)系统。它由萨拉戈萨大学和伦敦帝…

Python_paramiko_与linux交互

一、基础功能介绍 # codingutf-8 import paramiko from time import sleep# 建立通信 transport paramiko.Transport((192.168.0.7, 22)) print(transport) # <paramiko.Transport at 0x5745ed0 (unconnected)># 建立连接 transport.connect(usernameroot, password1…

Vue3+ts;枚举(enum);Partial全部可选/Pick选一部分/配置 svg 图标/unplugin-vue-components组件自动按需加载

项目的创建 使用 create-vue 脚手架创建项目。 1.执行创建命令 pnpm create vue # or npm init vuelatest # or yarn create vue2.选择项目依赖内容。 ✔ Project name: … //项目名 ✔ Add TypeScript? … No / Yes ✔ Add JSX Support? … No / Yes ✔ Add Vue Router …