vite中配置 https 安全超文本网络协议

vite中配置 https 安全超文本网络协议

• * 1、本地模拟生成证书
  

  • 2、安装证书
  • 3、vite 中使用插件支持 https 协议

前言： https 的配置是相对安全的，但是需要购买证书，它是 SSL/TLS + HTTP 的安全超文本网络协议
此版本配置的是在 vite 开发服务器上临时配置的 https 协议， 生产环境需要购买证书， 在nginx 中配置

1、本地模拟生成证书

在 vite 项目根目录中创建 mkcert 目录
![在这里插入图片描述](https://img-
blog.csdnimg.cn/92554c9f168f42dcb0f5125f277a5d37.jpeg)
全局安装 mkcert

yarn add -g mkcert

利用 mkcert 创建 ca

mkcert create-ca

根据 ca 创建 cert （domains 后面跟着的是域名或者ip）

mkcert create-cert --domains 127.0.0.1,localhost

创建完成之后如上图

2、安装证书

找到 ca.crt 文件双击

![在这里插入图片描述](https://img-
blog.csdnimg.cn/27f8e94727514cd4b8d3e481a7d21cb1.jpeg)
![在这里插入图片描述](https://img-
blog.csdnimg.cn/bcd8c19eae0a497a8922cf0cf152b315.jpeg)

3、vite 中使用插件支持 https 协议

在 vite 项目中安装 @vitejs/plugin-basic-ssl 支持 https 协议

yarn add @vitejs/plugin-basic-ssl -D

vite.config.js 引入 使用

import pluginBasicSsl from “@vitejs/plugin-basic-ssl”

plugins: [
    vue(),
    pluginBasicSsl()  // 此插件支持 https 协议
],

网络安全工程师(白帽子)企业级学习路线

第一阶段：安全基础（入门）

第二阶段：Web渗透（初级网安工程师）

第三阶段：进阶部分（中级网络安全工程师）

如果你对网络安全入门感兴趣，那么你需要的话可以点击这里👉网络安全重磅福利：入门&进阶全套282G学习资源包免费分享！

学习资源分享