【Vite插件mkcert详尽安装配置手册】：为Vite的HTTPS开发服务轻松生成证书-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01262/article/details/143039974

【Vite插件mkcert详尽安装配置手册】：为Vite的HTTPS开发服务轻松生成证书

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

项目基础介绍及主要编程语言

项目名称： vite-plugin-mkcert
开发者： liuweiGL
项目地址： https://github.com/liuweiGL/vite-plugin-mkcert
主要编程语言： TypeScript

本项目提供了一个便捷的解决方案，用于为Vite的HTTPS开发服务器生成所需的SSL证书，帮助开发者解决在本地进行HTTPS开发时遇到的证书问题，确保浏览器不显示证书错误。特别适合希望利用HTTP/2来提升并发性能，以及注重开发环境体验的用户。

关键技术和框架

关键技术：

mkcert：这是一个简单的命令行工具，用于创建自签名的X.509证书和私钥，非常适合本地开发。
Vite：由Vue.js作者尤雨溪打造的下一代前端构建工具，以其快速的热更新和简洁的配置著称。

集成框架：

Vite：作为核心，处理项目的打包和热更新。
Node.js：作为运行环境，因为Vite和mkcert都基于Node.js。

安装和配置指南

准备工作

确保安装Node.js：你需要至少Node.js v14及以上版本。可以访问Node.js官网下载安装。
环境初始化：打开终端或命令提示符。

第一步：安装vite-plugin-mkcert

在你的项目根目录下（如果你还没有项目，可以通过npm init初始化一个新项目）。

使用npm或yarn添加此插件到你的项目开发依赖中：

npm add vite-plugin-mkcert --save-dev

或者

yarn add vite-plugin-mkcert -D

第二步：配置Vite

对于纯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版本支持Vite，然后在nuxt.config.js里加入：

import mkcert from 'vite-plugin-mkcert';

export default {
  vite: {
    plugins: [
      mkcert({
        savePath: './certs', // 指定保存证书的位置
        force: true, // 强制重新生成证书，即使没有设置Vite的https属性
      }),
    ],
  },
  devServer: {
    https: {
      cert: './certs/cert.pem',
      key: './certs/key.pem',
    },
  },
};