vite配置https&安装本地自签名证书方法

941 阅读2分钟

网上查了下,倒是有一大推vite开启https的方法,但是大部分是mac的,windows电脑无法成功,所以经过一阵捣鼓,总结了这边文章,希望对你有帮助

使用工具

Mkcert是一个用于生成本地可信开发证书的简单工具,不需要配置。

只针对windows电脑,其他系统请看官方文档

下载文件

大部分的Pc都是AMD架构 image.png

开始安装

下载完成后放到c盘根目录(你可以随便放哪都行),然后cmd(我用的系统自带的)进入文件所在目录,输入安装命令

mkcert-v1.4.4-windows-amd64.exe -install

将CA证书加入本地可信CA,使用此命令,就能帮助我们将mkcert使用的根证书加入了本地可信CA中,以后由该CA签发的证书在本地都是可信的。

执行过程中弹出安全警告,选是

image.png 安装完成,如图

image.png

查询是否安装成功

mkcert-v1.4.4-windows-amd64.exe

image.png

列出CA证书的存放路径

mkcert-v1.4.4-windows-amd64.exe -CAROOT

image.png

生成SSL自签证书

以下两个选一个就行

签发本地访问的证书

直接跟多个要签发的域名或ip,比如签发一个仅本机访问的证书(可以通过127.0.0.1和localhost,以及ipv6地址::1访问) mkcert-v1.4.3-windows-amd64.exe localhost 127.0.0.1 ::1

mkcert-v1.4.4-windows-amd64.exe localhost 127.0.0.1 ::1

image.png

签发本地IP地址的证书(我用的是IP地址)

mkcert-v1.4.4-windows-amd64.exe 192.168.56.1

image.png

生成文件如下(就在当前安装包所在的目录)

image.png

其中192.168.2.25.pem为公钥,192.168.2.25-key.pem为私钥

将公钥.pem格式改为.crt格式,然后双击安装证书

image.png

image.png

image.png

image.png

image.png

image.png

使用chrome浏览器进行验证查看是否生效

image.png

image.png

最后再把刚刚改为.crt格式的文件改回来.pem

vite配置

// 顶部引入 import fs from 'node:fs'

server: {
    https: {
      cert: fs.readFileSync(path.join(__dirname, './keys/agent.pem')),
      key: fs.readFileSync(path.join(__dirname, './keys/agent-key.pem')),
    },
    host: '0.0.0.0'
  },

最好重启下vite,这个时候就可以访问了

image.png