All Tags
On this page

vite集成https，并安装本地自签名证书

#vite
avatar
jerrywu001
创建时间：2023-09-04 07:20:15

问题描述

  1. vite默认使用http，模块很多时，访问速度上似乎不太理想
  2. msw在http模式下，会存在fallback mode的问题

🎯 本文的愿景是解决上面的问题，正好发现https+证书可以完美解决

启用https

  • package.json
"scripts": {
-  "dev": "vite"
+  "dev": "vite --host"
}
  • vite.config.ts
+ server: {
+  https: true,
+ }

配置证书

mkcert

install mkcert

npm i mkcert -g

生成ca证书

cd [project folder]

mkdir keys

cd keys

mkcert create-ca [options] # options 参见npm文档

再根据ca证书生成cert证书

# mkcert create-cert [options] # options 参见npm文档

# 如下，设置domains
mkcert create-cert --domains 127.0.0.1,localhost,custom1.domain.xxx,custom2.domain.xxx

安装证书

mac

  • 打开keys文件夹，并双击ca.crt，会弹出密钥串访问对话框

  • 双击对话框中的Test CA： 点开“信任” -> 使用此证书时 -> 始终信任 -> 输入密码即可

  • 成功

windows

  • 双击ca.crt，在弹出对话框中点击“安装证书”

  • 弹出框中，选择本地计算机，点击下一步

  • 弹出框中，按截图提示操作

  • 弹出框中，点击确定即可

验证证书是否生效

修改vite.config.ts

server: {
-  https: true,
+  https: {
+    cert: fs.readFileSync(path.join(__dirname, 'keys/cert.crt')),
+    key: fs.readFileSync(path.join(__dirname, 'keys/cert.key')),
+  },
},

启动本地服务

npm run dev

同时也解决了msw fallback mode的问题, 效果：