vite-plugin-mkcert 技术文档

vite-plugin-mkcert 技术文档

vite-plugin-mkcert Provide certificates for vite's https dev service. 项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-mkcert

---

简介

vite-plugin-mkcert 是一款专为 Vite 设计的插件，旨在通过 mkcert 工具为 Vite 的 HTTPS 开发服务器提供证书支持，解决HTTP/2协议下的浏览器缓存无效问题以及消除烦人的HTTPS证书警告。

---

安装指南

首先，确保您的环境中已安装 Node.js，然后按照以下步骤操作：

对于纯 Vite 项目

1. 执行以下命令以添加依赖：

   yarn add vite-plugin-mkcert -D
   

对于 Nuxt.js 项目（基于 Vite）

同样的，您需要执行：

yarn add vite-plugin-mkcert -D

---

使用说明

Vite 应用

在 vite.config.js 文件中加入以下配置：

import { defineConfig } from 'vite';
import mkcert from 'vite-plugin-mkcert';

export default defineConfig({
  server: {
    https: true, // 注意：Vite 5+ 版本可能不再需要显式设置此选项
  },
  plugins: [mkcert()],
});

Nuxt.js 应用（Vite 后端）

在 nuxt.config.js 中进行相应配置：

import mkcert from 'vite-plugin-mkcert';

export default defineNuxtConfig({
  vite: {
    plugins: [
      mkcert({
        savePath: './certs', // 指定证书保存路径
        force: true, // 强制生成证书，即便未在配置中设置 https
      }),
    ],
  },
  devServer: {
    https: {
      cert: './certs/cert.pem',
      key: './certs/dev-key.pem',
    },
  },
});

---

项目API使用文档

参数说明：

• hosts: 自定义主机名，默认为 localhost 及本地 IP 地址。
• force: 是否强制生成证书，默认为 false。
• autoUpgrade: 是否自动升级 mkcert，适用于 mkcert 更新时。
• source: 指定 mkcert 下载源，国内用户可设为 coding 使用 Coding 镜像。
• mkcertPath: 在网络受限时，指定本地的 mkcert 路径。
• savePath: 保存文件的位置，默认是特定的插件数据目录。
• keyFileName: 私钥文件名。
• certFileName: 证书文件名。

---

证书在移动设备上的信任配置

• iOS: 通过 AirDrop、邮件或HTTP服务传输rootCA.pem到设备，随后在“设置 > 已下载描述文件”中安装，并参照苹果官方文档启用完全信任。

• Android: 安装rootCA.pem后，在开发模式下应用用户根证书设置。

---

显示调试信息

设置环境变量 DEBUG 为 vite:plugin:mkcert 即可查看插件的详细日志。

---

原理简述

该插件利用 mkcert 创建一个本地 CA 并产生适配服务器的HTTPS证书，使其能够被浏览器及移动设备信任。

---

卸载提示

如果需要移除证书，运行 mkcert -uninstall。

---

感谢贡献者和支持技术，尤其是 mkcert 项目本身，它使得本地HTTPS开发变得更加简单可靠。

vite-plugin-mkcert Provide certificates for vite's https dev service. 项目地址: https://gitcode.com/gh_mirrors/vi/vite-plugin-mkcert