当前位置: 首页 > news >正文

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

在项目根目录下的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的端口必须是443port: 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.lryc.cn/news/156907.html

相关文章:

  • 包装类笔记
  • TC和TG油封有什么区别?
  • 大数据之MapReduce
  • 《机器人学一(Robotics(1))》_台大林沛群 第 5 周【机械手臂 轨迹规划】 Quiz 5
  • 嵌入式面试/笔试C相关总结
  • 支付宝使用OceanBase的历史库实践分享
  • accelerate 分布式技巧(一)
  • 密码找回安全
  • Spring Boot + Vue的网上商城之商品管理
  • B站:提高你的词汇量:如何用英语谈论驾驶
  • 大前端面试注意要点
  • 稻盛和夫-如是说(读书笔记)
  • Jmeter是用来做什么的?
  • Docker基础教程
  • Linux命令200例:who用于显示当前登录到系统的用户信息
  • HGDB-修改分区表名称及键值
  • 1分钟了解音频、语音数据和自然语言处理的关系
  • 线性代数的学习和整理20,关于向量/矩阵和正交相关,相似矩阵等
  • OpenCV之ellipse函数
  • git快速查看某个文件修改的所有commit
  • 加强版python连接飞书通知——本地电脑PC端通过网页链接打开本地已安装软件(调用注册表形式,以漏洞扫描工具AppScan为例)
  • Jmeter进阶使用指南-使用断言
  • 44、Flink之module模块介绍及使用示例和Flink SQL使用hive内置函数及自定义函数详细示例--网上有些说法好像是错误的
  • 电脑入门: 路由器初学者完全教程
  • 如何查找GNU C语言参考手册
  • 弄懂软件设计模式(一):单例模式和策略模式
  • Redis----布隆过滤器
  • day 49 | 647. 回文子串 ● 516.最长回文子序列
  • 【网络编程】C++实现网络通信服务器程序||计算机网络课设||Linux系统编程||TCP协议(附源码)
  • C语言类型占内存大小