【亲测免费】 Vite 插件 vite-plugin-mkcert 常见问题解决方案

项目基础介绍

vite-plugin-mkcert 是一个为 Vite 开发服务器提供 HTTPS 证书支持的开源插件。该插件使用 mkcert 工具生成自签名证书，以解决开发过程中遇到的自签名证书问题，使得开发者能够在本地开发环境中使用 HTTP/2，以及避免浏览器出现烦人的 HTTPS 证书错误提示。

主要的编程语言为 JavaScript。

新手常见问题及解决方案

问题 1：如何安装和使用 vite-plugin-mkcert 插件？

解决步骤：

1. 安装依赖：

   yarn add vite-plugin-mkcert -D
   

2. 在 Vite 配置文件中引入插件并配置：

   import { defineConfig } from 'vite';
   import mkcert from 'vite-plugin-mkcert';
   
   // https://vitejs.dev/config/
   export default defineConfig({
     server: {
       https: true
     },
     plugins: [mkcert()]
   });
   

问题 2：如何在移动设备上信任生成的证书？

解决步骤：

1. 在命令行中执行以下命令，获取根证书的位置：

   mkcert -CAROOT
   

2. 将 rootCA.pem 文件传输到移动设备上。对于 iOS，可以通过 AirDrop、邮件等方式发送；对于 Android，可以通过 HTTP 服务器提供服务，然后下载。

3. 打开文件，按照系统指引安装证书。在 iOS 上需要在设置中找到已下载的配置文件并信任它；在 Android 上，安装后需要手动设置信任。

问题 3：如何自定义生成的证书的主机名？

解决步骤：

1. 在 Vite 配置文件中设置 hosts 参数，指定自定义的主机名。例如：

   export default defineConfig({
     plugins: [
       mkcert({
         hosts: ['localhost', 'example.com', 'myapp.test']
       })
     ]
   });
   

2. 确保 hosts 文件中添加了相应的条目，将自定义的主机名解析到本地开发服务器的 IP 地址。

以上就是新手在使用 vite-plugin-mkcert 时可能会遇到的一些常见问题及其解决步骤。希望这些信息能够帮助开发者们更加顺畅地使用该插件。