Vue项目开启https服务并生成本地证书文件

最新推荐文章于 2024-08-23 14:03:06 发布
最新推荐文章于 2024-08-23 14:03:06 发布
阅读量2.6k 收藏 1
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58060036/article/details/116996158
版权

vue 项目开启https服务并生成本地证书文件

步骤：

  1. 在项目的build文件下新建文件夹命名为cert​
    在这里插入图片描述

  2. 在cert文件内右键打开“git bash”输入3条命令来生成证书

  3. 执行“openssl genrsa -out private.key 1024”命令，生成私钥.key文件
    在这里插入图片描述

  4. 执行“openssl req -new -key private.key -out csr.key”命令，生成CSR证书签名，然后一路回车键即可
    在这里插入图片描述

  5. 执行“ openssl x509 -req -days 3650 -in csr.key -signkey private.key -out file.crt”命令，生成证书文件
    在这里插入图片描述

  6. 最后cert文件夹里面总共含有以下三个文件就代表证书生成成功了
    在这里插入图片描述

  7. 最后运行项目即可（如果还是不行，可以试着在浏览器内导入证书）

想把星星变成糖
关注
nginx管理：配置SSL证书、把http的域名请求转成https、流水线nginx镜像部署VUE项目
iOS逆向与安全
12-11 1286
dockerfile： 镜像构建。流水线配置：node.js构建。
解决：VUE nginx 部署 SSL https访问 WebSocket 问题
weixin_39255905的博客
10-20 6445
报错1.报错2.说明：http 是 ws：`ws://192.168.110.33:8080/websocket/${this.$store.state.user.name}`https 是 wss: `wss://alarm.shijiguorui.com:443/websocket/${this.$store.state.user.name}`1. 服务nginx代理使用http 访问 WebSocket 正常（前后端协议一直，都是http ws请求）
生成本地泛域名https证书
08-31
生成本地泛域名https证书
vite中配置 https 安全超文本网络协议
Innocence_0的博客
08-23 997
https 的配置是相对安全的，但是需要购买证书，它是 SSL/TLS + HTTP 的安全超文本网络协议此版本配置的是在 vite 开发服务器上临时配置的 https 协议， 生产环境需要购买证书， 在nginx 中配置。
vue-cli3项目本地启用https,并用mkcert生成证书
weixin_45629194的博客
09-06 2532
利用刚刚生成的ca证书，再生成cert证书，mkcert create-cert，会在刚刚的路径下生成cert.crt和cert.key文件。判断是否安装成功，输入命令：mkcert --version，如果能看到版本号，说明安装成功，可以进行下一步。2、生成一个ca证书，mkcert create-ca，生成之后会看到一个ca.crt和ca.key文件。4、在vue项目中使用cert.crt和cert.key。导入ca.crt，然后选择受信任的根证书颁发机构。3、在浏览器中导入ca.crt。
vue项目，uniapp项目本地调试开启https，加载本地证书
charlie_y的博客
09-20 8873
废话不多说，前端开发调用摄像头，获取地址位置时需要https的问题，在本地运行时可以参考这篇文章操作我这里用的mkcert如果你使用的vite，那么可以直接使用到此，证书生成安装结束了，项目跑起来就ok了。
vue3 本地开发开启 https
奇点的博客
11-08 3272
会在当前目录生成，cert.crt 和 cert.key 两个文件。会在当前目录生成，ca.crt 和 ca.key 两个文件。
vue开启https，加载本地证书
许发君博客
11-23 1万+
vue开启https，加载本地证书 1. 通过mkcert创建本地证书 1.1 安装mkcert 安装方式：npm 包地址：https://www.npmjs.com/package/mkcert 安装命令：npm install -g mkcert 判断是否安装成功，输入命令：mkcert --version，如果能看到版本号，说明安装成功，可以进行下一步 1.2 生成证书 生成一个ca证书，mkcert create-ca，生成之后会看到一个ca.crt和ca.key文件 利用刚刚生成的ca证书，
vue项目本地开启https访问模式
热门推荐
Ivan的编程随笔
08-05 7万+
在实际开发中，我们会以https形式进行页面访问，但是根据vue-cli的版本不同，配置方式也有所差异，以下分别从vue-cli3.x和vue-cli2.x构建的项目分别进行配置开启https:
Vue + 原生Canvas实现生成电子证书的实践
m0_37406045的博客
10-13 3492
上次写完笔记后发现还是挺有用的，就考虑以后还是继续不定期记录一下，复盘之前开发过程中的思路并激发一些新的灵感，还是蛮不错的。 这次要记录的是之前做过的一个电子证书的小功能。需求非常非常简单，只需要把背景图和动态的文本合成并生成一个图片文件即可。当然，这个需求的实现方式有多种多样，最简单的直接html+css无脑堆样式然后用插件转换成图就行，也不会有任何性能问题。不过为了顺便复习一下我那吃灰吃的都快包浆了的Canvas的知识，这次就直接选择了Canvas渲染的方式。
web:vue都已经打包好了，请访问https
03-23
web:vue都已经打包好了，请访问https
k8s部署kuboard(支持https认证)
11-04
总结来说，部署Kuboard并配置HTTPS认证的过程包括：下载和修改配置文件、部署Kuboard、配置Ingress规则、生成并签发SSL/TLS证书以及更新Kuboard的配置以使用这些证书。这个过程保证了Kuboard在Kubernetes环境中的...
笔记：Vue3怎么启动Https服务
sky8880的博客
11-22 1249
Vue3怎么启动Https服务，怎么启动https 外部暴露https服务。
vue3+vite如何在本地进行https调试
前端小伍的博客
09-07 4282
开启vite.config中的https，然后引入并使用一个自动签名的包即可。
【Vue】Vue之通过http服务打开build后的项目
weixin_39068791的博客
09-06 1915
原文链接：https://blog.csdn.net/hzkang/article/details/78355410 视频参考（仿饿了么项目——nodejs调试和webpack配置介绍）：链接：https://pan.baidu.com/s/1bqLZSFkRs8FPYZeJQx55kw 密码：2owe   vue的打包命令是npm run build，打包完直接打开页面是不行的，只能看到加...
证书无效导致vue项目代理服务器报错（CERT_HAS_EXPIRED)
m0_57996540的博客
12-04 2631
证书无效导致vue项目代理服务器报错（CERT_HAS_EXPIRED)
Vue2中 如何生成https本地证书？如何使用openssl生成本地证书？
最新发布
09-28
在Vue2项目中，生成HTTPS本地证书通常是为了开发环境下的模拟生产环境需求，比如进行HTTPS调试。这里我们使用Node.js配合`openssl`工具来创建自签名的SSL证书。以下是基本步骤： 1. **安装openssl** (如果还没装): ```bash sudo apt-get install openssl # 或者在macOS上使用Homebrew brew install openssl ``` 2. **创建私钥** (`private.key`): ```bash openssl genrsa -out private.key 4096 ``` 这里指定密钥长度为4096位，可以根据需要调整。 3. **创建公钥（public.key）并从私钥导出**: ```bash openssl rsa -in private.key -pubout -out public.key ``` 4. **创建CSR（Certificate Signing Request）**: ```bash openssl req -new -key private.key -out certificate_request.csr -subj "/CN=localhost" ``` `-CN` 是Common Name，这里设置为主机名。 5. **查看并编辑CSR文件（如有必要）**，添加组织信息等，然后保存。 6. **使用私钥签署CSR文件生成CA证书**: ```bash openssl x509 -req -days 365 -in certificate_request.csr -signkey private.key -out localhost.crt ``` 这将创建一个有效期为一年的自签证书。 7. **把生成的cert.pem和key.pem文件复制到你的项目的static目录下，通常会被web服务器（如Nginx或Webpack Dev Server）自动加载作为HTTPS访问的凭证**。 注意：这种方式生成的是自签名证书，仅限于测试环境，正式部署时应使用受信任的CA颁发的证书。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值