Vite开启https — 离线和在线生成签名证书-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vite开启https — 离线和在线生成签名证书。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

使用Vite构建工具，导致文件请求比较多，每个请求都需要三次握手四次挥手，而https可以多路复用，可以节约大量三次握手四次挥手时间，提升开发效率。
要想使用https协议，必不可少的是颁发证书这个步骤。

一、证书颁发

可以使用 OpenSSL 来操作一堆命令生成，这里使用更简单的工具mkcert

1、离线情况（win7系统）

a. 若没有shell工具，安装shell

如果使用的是win7，系统是没有自带shell工具，需要手动安装Windows Management Framework
下载地址若不可用，请自行百度
下载地址: https://download.microsoft.com/download/6/F/5/6F5FF66C-6775-42B0-86C4-47D41F2DA187/Win7AndW2K8R2-KB3191566-x64.zip

b. 下载 mkcert 工具

mkcert github地址：https://github.com/FiloSottile/mkcert
下载地址： https://github.com/FiloSottile/mkcert/releases 找到合适的下载包下载

c. 生成证书

打开PowerShell
将exe文件直接拉进shell，在后面添加 -install，然后回车，如下：
```
PS F:\test> D:\chrome\mkcert-v1.4.4-windows-arm64.exe -install
```
为指定IP或域名生成公钥和SSL证书
再将exe文件直接拉进shell，在后面添加 localhost 127.0.0.1，然后回车，如下：
```
PS F:\test> D:\chrome\mkcert-v1.4.4-windows-arm64.exe localhost 127.0.0.1
```
即可在当前目录下生成两个文件，一个是公钥（发起请求时需要携带公钥），一个是证书

2、在线情况

按照官文（https://github.com/FiloSottile/mkcert）安装，略

二、Vite配置

把上面生成的两个文件放到项目根目录keys文件夹

server: {
  host: true,
  port: 3001,
  open: true,
  https: {
    key: fs.readFileSync("keys/localhost+1-key.pem"),  // 读取我们上面生成的公钥
    cert: fs.readFileSync("keys/localhost+1.pem"),	// 读取我们上面生成的证书
  },
  proxy: {
    "/api": {
      target: VITE_PROXY,
      changeOrigin: true,
      rewrite: (path) => path.replace(/^\/api/, "/gree"),
    },
  },
},