《开发环境使用HTTPS调试》

🤖 作者简介：水煮白菜王 ，一位资深前端劝退师 👻

👀 文章专栏： 前端专栏 ，记录一下平时在博客写作中，总结出的一些开发技巧✍。

感谢支持💕💕💕

近期文章：
《mkcert介绍及使用》

目录

• • • 直接看操作👀下面的正文👉 正文(#link01))
    • mkcert
    • [create-ca 和 create-cert](#create-ca 和 create-cert)
    • • create-ca
      • create-cert
    • 1.为系统安装mkcert
    • 2.查看版本检验是否安装成功
    • 3.创建证书颁发机构
    • 4.创建证书
    • 5.对生成ca.crt进行安装
    • 6.在项目config配置文件`devServer`下引入对应的证书文件
    • 7.运行项目验证
    • [8.vue3 + vite](#8.vue3 + vite)

在开发环境中， 有时会需要模拟https环境，来调试硬件及其他业务要求必须使用https访问。本地需要使用自签SSL证书使用的CA证书添加到系统或浏览器的可信CA证书，解决浏览器的信任。为了更方便开的发调试，我们来使用一种更加方便生成本地https证书，并且信任自签CA的方案 mkcert。

直接看操作👀下面的正文👉 [正文](#直接看操作👀下面的正文👉 正文)

mkcert

mkcert是一个使用go语言编写，用于生成本地开发环境中的受信任的 SSL/TLS 证书，具有跨平台，支持多域名，自动信任CA等一系列方便的特性可供开发者快速地为本地域名设置安全的https环境。

这对于在本地开发环境中测试 HTTPS 连接非常有用，因为它可以为你的本地开发域名生成自签名的证书，并通过一个根证书（CA）使其在你的系统上被信任。

create-ca 和 create-cert

create-ca 和 create-cert 是 mkcert 工具中使用的子命令。mkcert 主要通过这两个子命令来生成根证书（CA）和为特定域名生成证书。

在日常使用中，mkcert 的默认用法已经涵盖了 create-ca 和 create-cert 的功能，因此通常不需要单独使用这两个子命令。

create-ca

create-ca 子命令用于生成一个根证书（CA）。这个根证书将被用来签发其他证书。在 mkcert 中，通常不需要显式地使用 create-ca，因为 mkcert 会在第一次运行时自动创建根证书并安装它。

mkcert -create-ca

这将生成一个根证书，通常位于 ~/.local/share/mkcert/rootCA.pem 文件中。

create-cert

create-cert 子命令用于为特定的域名生成证书。这些证书是由前面生成的根证书签发的，因此会被系统信任。

mkcert -create-cert example.local

这将为 example.local 生成一个证书和对应的私钥，通常位于 example.local.pem 和 example.local-key.pem 文件中。

正文 为快速搭建本地开发https环境 以及 更好地理解 mkcert 的工作原理，我们以 `create-ca` 和 `create-cert` 的过程生成的文件进行配置 。下面一把流操作最后在在项目config配置文件引入

1.为系统安装mkcert

 npm install -g mkcert    

2.查看版本检验是否安装成功

mkcert --version

3.创建证书颁发机构

将生成一个根证书 ca.crt 和对应的私钥 ca.key

mkcert create-ca

4.创建证书

为特定域名生成的证书cert.crt、对应的私钥cert.key

mkcert create-cert

5.对生成ca.crt进行安装

注意的是安装证书存储选择受信任的根证书颁发机构，其他操作闭眼睛一路通过即可

6.在项目config配置文件devServer下引入对应的证书文件

<!-- Vue 2 Code -->
const path = require('path')
const fs = require('fs') // 处理读写模块

module.exports = {
	
	// ...
	devServer: {
		// ...
		https: {
			cert: fs.readFileSync(path.join(__dirname, './cert.crt')), 
			key: fs.readFileSync(path.join(__dirname, './cert.key'))  
		},
	},
}

7.运行项目验证

8.vue3 + vite

Vue3也可以向上面Vue2一样配置https，但没必要这么操作臃肿，vue3使用vite插件vite-plugin-basic-ssl来配置https，如果真没有用vite😂，那这是天命人了😇

npm install -D @vitejs/plugin-basic-ssl

import { defineConfig } from "vite";
import basicSsl from '@vitejs/plugin-basic-ssl'
 
export default defineConfig(()=>{
	server: {
	    https: true, //开启https
   		// ...
   },
   plugins: [
   		basicSsl(), //加载插件
   		// ...
   ]
})

如果你觉得这篇文章对你有帮助，请点赞 👍、收藏 👏 并关注我！👀