在 vite 开发环境,使用https自签证书 --- mkcert

news2024/11/29 22:50:00

在 vite 开发环境,使用https自签证书 — mkcert

使用basicSsl(@vitejs/plugin-basic-ssl)

在vite开发环境中,使用 basicSsl 插件能暂时提供https服务,同时,也会面临总是提示一下的问题,如下图

提示https证书不安全
请添加图片描述

你的链接不是私密链接
请添加图片描述

这种情况下,除浏览器以外的特殊环境下,比如,在企业微信工作台,无法顺利进行开发和测试

mkcert生成安全的证书

mkcert 地址 https://github.com/FiloSottile/mkcert
请添加图片描述

共两条命令,生成cert.pem和key.pem 两个文件

mkcert -install

mkcert example.com "*.example.com" localhost 127.0.0.1 ::1

其中,第二条命令是生成匹配相应域名的,用引号包裹,可以支持正则来匹配多级域名的,运行后,会在本目录下生成相应的两个文件

vite 配置 https 证书

在 vite 配置文件中,配置server属性下 https属性,即可

import fs from 'node:fs'
export default defineConfig({
server: {
  // https: true,
  https: {
   key: fs.readFileSync('cert/cert-key.pem'),
   cert: fs.readFileSync('cert/cert.pem'),
  },
}
})

重启运行项目后,在浏览器地址栏,可以看到 https 的改变——安全的https,也不再总是提示你的链接不是私密链接

最后,可以在各种环境下,顺利开展,愉快工作

![请添加图片描述](https://img-blog.csdnimg.cn/direct/163bd945015548748fb2fe3b4c58893a.png![请添加图片描述](https://img-blog.csdnimg.cn/direct/3896447232934524b72201ff4ec2c95a.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1529717.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

2024.3.20 使用maven打包jar文件和保存到本地仓库

2024.3.20 使用maven打包jar文件和保存到本地仓库 使用maven可以很方便地打包jar文件和导入jar文件,同时还可以将该文件保存在本地仓库重复调用。 使用maven打包jar文件和保存到本地仓库 package打包文件。 install导入本地仓库。 使用maven导入jar文件 点击“…

智能合约 之 部署ERC-20

Remix介绍 Remix是一个由以太坊社区开发的在线集成开发环境(IDE),旨在帮助开发者编写、测试和部署以太坊智能合约。它提供了一个简单易用的界面,使得开发者可以在浏览器中直接进行智能合约的开发,而无需安装任何额外的…

WPF —— 控件模版和数据模版

1:控件模版简介: 自定义控件模版:自己添加的样式、标签,控件模版也是属于资源的一种, 每一个控件模版都有一唯一的 key,在控件上通过template属性进行绑定 什么场景下使用自定义控件模版,当项目里面多个地方…

基于python考试分析系统的设计和实现-flask-django-nodejs-php

随着电子技术的普及和快速发展,线上管理系统被广泛的使用,有很多商业机构都在实现电子信息化管理,图书推荐也不例外,由比较传统的人工管理转向了电子化、信息化、系统化的管理。   本文的重点是对考试分析系统展开了详细的描述&a…

整型数组按个位值排序 - 华为OD统一考试(C卷)

OD统一考试(C卷) 分值: 100分 题解: Java / Python / C 题目描述 给定一个非空数组(列表),其元素数据类型为整型,请按照数组元素十进制最低位从小到大进行排序,十进制最低位相同的元素&#xf…

英伟达GTC2024大会开幕,发布机器人003计划,引领具身智能新时代

一、背景 在全球科技创新的前沿阵地,2024年3月的英伟达GPU技术大会(GTC)再次成为全球瞩目的焦点。在此次盛会上,英伟达公司创始人兼首席执行官黄仁勋先生不仅展示了其公司在加速计算和生成式AI领域的最新突破,更震撼发…

[Uni-app] 微信小程序的圆环进度条

效果图&#xff1a; 组件完整代码如下&#xff1a; <template><view class"base-style":style"position: relative;width: diameter px;height: diameter px;display: flex;flex-direction: row;background-color: bgColor ;"><!…

基于nodejs+vue班级管理系统的设计与实现-flask-django-python-php

随着电子技术的普及和快速发展&#xff0c;线上管理系统被广泛的使用&#xff0c;有很多事业单位和商业机构都在实现电子信息化管理&#xff0c;班级管理系统也不例外&#xff0c;由比较传统的人工管理转向了电子化、信息化、系统化的管理。随着互联网技术的高速发展&#xff0…

基于SpringBoot+Redis实现接口限流

前言 业务中需要对一些接口进行限流处理&#xff0c;防止机器人调用或者保证服务质量&#xff1b; 实现方式 基于redis的lua脚本 引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-redis&…

idea import的maven类报红

idea 报红/显示红色的原因 一般报红&#xff0c;显示红色&#xff0c;是因为 idea 在此路径下&#xff0c;找不到这个类。 找到是哪个 jar 包的类导致 idea 报红 点击报红的路径的上一层&#xff0c;进入jar 包。比如&#xff1a; import com.aaa.bbb.ccc.DddDto;这个 impo…

计算机二级(Python)真题讲解每日一题:《方菱形》

描述‪‬‪‬‪‬‪‬‪‬‮‬‪‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‭‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‮‬‪‬‪‬‪‬‪‬‪‬‮‬‭‬‫‬‪‬‪‬‪‬‪‬‪‬‮‬‫‬‪‬‪‬‪‬‪‬‪‬‪‬‮‬‪‬‮‬ 请写代码替换横线&#xff0…

从服务器到云原生:企业IT基础设施的演进之路

随着数字经济的迅猛发展&#xff0c;企业IT数字化转型已成为推动业务创新和提升竞争力的关键。在这一转型过程中&#xff0c;基础设施的建设与升级显得尤为重要。企业需要不断优化和更新他们的基础设施&#xff0c;以适应不断变化的市场需求和技术发展。本文将探讨企业IT数字化…

大数据面试题 —— Kafka

目录 消息队列 / Kafka 的好处消息队列的两种模式什么是 KafkaKafka 优缺点你在哪些场景下会选择 Kafka讲下 Kafka 的整体结构Kafka 工作原理 / 流程Kafka为什么那么快/高效读写的原因 / 实现高吞吐的原理生产者如何提高吞吐量&#xff08;调优&#xff09;kafka 消息数据积压&…

一维小波包的分解与重构程序深入学习——Matlab

绘制上述图的matlab程序为&#xff1a; clear all; close all; load noisdopp; xnoisdopp; wptwpdec(x,3,db1,shannon) %返回小波包树&#xff0c;设置采用的熵为shannon plot(wpt); %% 学习目标&#xff1a;一维小波包的分解和重构深入学习 %% 获取小波树上某个节点的小…

【滑动窗口、矩阵】算法例题

目录 三、滑动窗口 30. 长度最小的子数组 ② 31. 无重复字符的最长子串 ② 32. 串联所有单词的子串 ③ 33. 最小覆盖子串 ③ 四、矩阵 34. 有效的数独 ② 35. 螺旋矩阵 ② 36. 旋转图像 ② 37. 矩阵置零 ② 38. 生命游戏 ② 三、滑动窗口 30. 长度最小的子数组 ② 给…

Science:量子纠缠突破成像极限

研究专家指出&#xff0c;量子物理学的一些核心特质&#xff0c;如粒子纠缠&#xff0c;为解决一个困扰显微技术领域多年的难题提供了新的思路&#xff1a;如何在极小的尺度上获得更清晰的图像。 这项创新性的研究通过利用纠缠光子&#xff0c;开发出了一种新技术&#xff0c;能…

Web前端-HTML

HTML 负责页面的结构&#xff08;页面的元素和内容&#xff09; HTML由标签组成&#xff0c;标签都是预定义好的。例如<a>展示超链接&#xff0c;使用<img>展示图片&#xff0c;<vedio>展示视频。 HTML代码直接在浏览器中运行&#xff0c;HTML标签由浏览器…

在微信小程序中或UniApp中自定义tabbar实现毛玻璃高斯模糊效果

backdrop-filter: blur(10px); 这一行代码表示将背景进行模糊处理&#xff0c;模糊程度为10像素。这会导致背景内容在这个元素后面呈现模糊效果。 background-color: rgb(255 255 255 / .32); 这一行代码表示设置元素的背景颜色为白色&#xff08;RGB值为0, 0, 0&#xff09;&a…

行业模板|DataEase制造行业大屏模板推荐

DataEase开源数据可视化分析平台于2022年6月发布模板市场&#xff08;https://templates-de.fit2cloud.com&#xff09;&#xff0c;并于2024年1月新增适用于DataEase v2版本的模板分类。模板市场旨在为DataEase用户提供专业、美观、拿来即用的大屏模板&#xff0c;方便用户根据…

Stable Diffusion WebUI 生成参数:高清修复/高分辨率修复(Hires.fix)

本文收录于《AI绘画从入门到精通》专栏&#xff0c;专栏总目录&#xff1a;点这里。 大家好&#xff0c;我是水滴~~ 在本篇文章中&#xff0c;我们将深入探讨 Stable Diffusion WebUI 的一个引人注目的生成参数——高分辨率修复&#xff08;Hires.fix&#xff09;。我们将逐一…