vue-cli3项目本地启用https,并用mkcert生成证书

news2025/1/14 18:24:52

在项目根目录下的vue.config.js文件中:

// vue.config.js
module.exports = {
  devServer: {
    host:'dev.nm.cngc'
    // 此处开启 https,并加载本地证书(否则浏览器左上角会提示不安全)
    https:  {
    	cert: fs.readFileSync(path.join(_dirname,'./cert.crt')),
    	key: fs.readFileSync(path.join(_dirname,'./cert.key')),
	},
	// 注意: https的端口必须是443
	port: 443
  }
}

mkcert生成证书

1、安装命令:npm install -g mkcert
判断是否安装成功,输入命令:mkcert --version,如果能看到版本号,说明安装成功,可以进行下一步
2、生成一个ca证书,mkcert create-ca,生成之后会看到一个ca.crt和ca.key文件
利用刚刚生成的ca证书,再生成cert证书,mkcert create-cert,会在刚刚的路径下生成cert.crt和cert.key文件( 还可以指定ip或域名:mkcert create-cert --domain 127.0.0.1,dev.nm.cngc )

3、在浏览器中导入ca.crt
chrome点击设置,搜索证书,找到管理证书:
在这里插入图片描述
导入ca.crt,然后选择受信任的根证书颁发机构
在这里插入图片描述

4、在vue项目中使用cert.crt和cert.key

https:  {
    	cert: fs.readFileSync(path.join(_dirname,'./cert.crt')),
    	key: fs.readFileSync(path.join(_dirname,'./cert.key')),
	},

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

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

相关文章

Linux查端口占用的几种方式

在Linux中,你可以使用以下几种方式来查看端口的占用情况。 一、使用netstat命令 #安装netstat yum -y install net-tools #检测端口占用 netstat -npl | grep 端口# 几种常规用法 netstat -ntlp //查看当前所有tcp端口 netstat -ntulp | grep 80 //查看所有80端…

科技成果鉴定测试报告一般包含哪些测试内容?

软件测评报告 一、科技成果评价是需要做第三方软件测评报告,一般是证明技术指标点是否完善,覆盖主要申报内容,应用软件项目科技成果鉴定测试内容: (一)是否完成合同或计划任务书要求的指标; …

Chaes恶意软件的新Python变种以银行和物流业为目标

银行和物流行业正遭受一种名为 "Chaes "恶意软件变种的攻击。 Morphisec 在与《黑客新闻》分享的一份新的详细技术报告中说:“Chaes”经历了重大的改版,从完全用 Python 重写,到整体重新设计和增强通信协议,导致传统防…

upload-labs1-21关文件上传通关手册

upload-labs文件上传漏洞靶场 目录 upload-labs文件上传漏洞靶场第一关pass-01:第二关Pass-02第三关pass-03:第四关pass-04:第五关pass-05:第六关pass-06:第七关Pass-07第八关Pass-08第九关Pass-09第十关Pass-10第十一…

TikTok运营秘籍:助力品牌增长

在数字化时代,TikTok已成为品牌推广的热门渠道。本文将分享关于TikTok运营的关键策略和技巧,助您快速引爆品牌增长。 一.了解TikTok特点与用户群体 理解TikTok平台的特点和用户群体是成功运营的基础。TikTok以短视频为主,追求创意、趣味和娱…

怎么做手机App测试?app测试详细流程和方法介绍

APP测试 1、手机APP测试怎么做? 手机APP测试,主要针对的是android和ios两大主流操作系统,主要考虑的就是功能性、兼容性、稳定性、易用性(也就是人机交互)、性能。 手机APP测试前的准备: 1.使用同类型的…

【AI】机器学习——朴素贝叶斯

文章目录 2.1 贝叶斯定理2.1.1 贝叶斯公式推导条件概率变式 贝叶斯公式 2.1.2 贝叶斯定理2.1.3 贝叶斯决策基本思想 2.2 朴素贝叶斯2.2.1 朴素贝叶斯分类器思想2.2.2 条件独立性对似然概率计算的影响2.2.3 基本方法2.2.4 模型后验概率最大化损失函数期望风险最小化策略 2.2.5 朴…

网络技术六:TCP/UDP原理

TCP/UDP原理 命令行操作基础 命令类型 常见设备管理命令 H3C路由交换产品连接方法 使用console线本地连接 协议Serial,接口com口,波特率9600 适用于设备的初次调试 使用Telnet远程访问 适用于设备上架配置好后的维护管理 使用SSH远程访问 数据传输…

【Hive SQL 每日一题】统计用户连续下单的日期区间

文章目录 测试数据需求说明需求实现 测试数据 create table test(user_id string,order_date string);INSERT INTO test(user_id, order_date) VALUES(101, 2021-09-21),(101, 2021-09-22),(101, 2021-09-23),(101, 2021-09-27),(101, 2021-09-28),(101, 2021-09-29),(101, 20…

【Java SE】抽象类与接口

目录 【1】抽象类 【1.1】抽象类概念 【1.2】抽象类语法 【1.3】抽象类特性 【1.4】抽象类的作用 【2】接口 【2.1】接口的概念 【2.2】语法规则 【2.3】接口使用 【2.4】接口特性 【2.5】实现多个接口 【2.6】接口间的继承 【2.7】接口使用实例 【2.8】Clonable …

React + ASP.NET Core 项目笔记一:项目环境搭建(一)

不重要的目录标题 前提条件第一步:新建文件夹第二步:使用VS/ VS code/cmd 打开该文件夹第三步:安装依赖第四步:试运行react第五步:整理项目结构 前提条件 安装dotnet core sdk 安装Node.js npm 第一步:新…

亚马逊云科技人工智能内容审核服务:大大降低生成不安全内容的风险

生成式人工智能技术发展日新月异,现在已经能够根据文本输入生成文本和图像。Stable Diffusion是一种文本转图像模型,可以创建栩栩如生的图像应用。通过Amazon SageMaker JumpStart,使用Stable Diffusion模型轻松地从文本生成图像。 尽管生成式…

科技云报道:AI时代,对构建云安全提出了哪些新要求?

科技云报道原创。 随着企业上云的提速,一系列云安全问题也逐渐暴露出来,云安全问题得到重视,市场不断扩大。 Gartner 发布“2022 年中国 ICT 技术成熟度曲线”显示,云安全已处于技术萌芽期高点,预期在2-5年内有望达到…

HTML emoji整理 表情符号

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><title>测试</title></head><body><div style"font-size: 50px;">&#128276</div><script>let count 0d…

树的基本定义

树的基本术语 一个节点包括一下内容 父节点的地址值值左节点的地址值右节点的地址值 如果没有父节点或者没有左右节点&#xff0c;那么这些节点对应的位置是 null 常见术语 节点—树中的元素常称为节点 边—根和它的子树根&#xff08;如果存在&#xff09;之间形成边的边可…

【数据结构】绪论

绪论 1.1数据结构的基本概念1.1.1 基本概念和术语1.1.2数据结构的三要素 1.2 算法与算法评价 1.1数据结构的基本概念 1.1.1 基本概念和术语 数据 数据是信息的载体&#xff0c;是描述客观事物属性的数、字符及所有能输入到计算机中并被计算机程序识别 和处理的符号的集合。数…

企业架构LNMP学习笔记17

反向代理&#xff1a; 反向代理服务器和真实访问的服务器是在一起的&#xff0c;有关联的。 根据实际业务需求&#xff0c;分发代理页面到不同的解释器。常见于代理后端服务器。 安装apache服务器&#xff1a; yum install -y httpd 修改配置文件&#xff1a; vim /et/http…

Postern配置HTTP和HTTPS的步骤

Postern是一款强大的Android代理工具&#xff0c;它允许您在设备上配置全局代理来实现安全、隐私保护和自由上网。本文将详细介绍如何使用Postern在Android设备上配置HTTP和HTTPS代理&#xff0c;为您提供更便捷的上网体验。 步骤1&#xff1a;下载和安装Postern应用 首先&am…

Threejs汽车展厅

2023-09-06-16-29-40 源码链接

浏览器安全-同源策略和CORS

同源策略 同源策略是浏览器的一个安全功能&#xff0c;浏览器禁止在当前域读写其他域的资源&#xff0c;如限制跨域发送ajax请求 不受同源策略限制的 1&#xff09;页面中的链接&#xff0c;重定向表单以及表单提交 2&#xff09;跨域资源引入 如script不受跨域限制&#xff0…