目录
前言
使用mkcert
安装
创建证书
利用 mkcert 创建 ca
根据 ca 创建 cert
安装证书
项目开启HTTPS
安装插件
配置 vitecofnig.js
最终效果
前言
今天我发现了一个宝藏，兄弟们！就是前端开发阶段是可以使用https来开发的。对不懂前端的后端兄弟来说，这不就是个通讯协议吗？有什么可骄傲的。
咳咳，那自己咱村里人才知道，HTTPS能给前端带来多少便利。例如，在开发阶段前端项目需要跨设备获取一定的权限，这个时候浏览器要求某些能力需要是https的情况下才能使用，比如获取摄像头画面，获取当前地理位置等。如果有些前端兄弟还不知道如何开始https进行开发，那开发体验一定不好吧。
我就废话少说了，下面给大家演示如何开启https，这里以vite 构建的项目为例。
使用mkcert
mkcert是一个能创建不带 OpenSSL 的自签名 tls 证书的插件，使用的时候需要全局安装。
安装
npm i mkcert -g创建证书
需要在项目工程文件中创建一个文件夹 mkcert。
然后进入该文件夹再开启终端，输入以下指令：
利用 mkcert 创建 ca
mkcert create-ca根据 ca 创建 cert
domains 后面跟着的是域名或者ip
mkcert create-cert --domains 127.0.0.1,localhost然后就能得到证书啦~
安装证书
双击 ca.crt进入安装界面。
安装完了ca.crt ，那么cert.crt的安装方法也是一样的。
项目开启HTTPS
证书安装完成之后，那么下一步咱们要做的就是把项目开启https。
安装插件
yarn add @vitejs/plugin-basic-ssl -D配置 vitecofnig.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pluginBasicSsl from "@vitejs/plugin-basic-ssl"
// https://vite.dev/config/
export default defineConfig({
plugins: [
vue(),
pluginBasicSsl()
],
server: {
https: true,
host: '0.0.0.0',
}
})
到这里，就配置完成就能成功开启https啦~
最终效果
最终打开效果如下：
pc端：
移动端：
