React+vite如何在本地进行https调试

原因

开发项目时，有时需要在https环境下调试。
我使用的是React框架+Vite打包工具，现在默认启动项目为http环境，我想切换为https，需要调用一个合法可用的证书。

方法

我尝试了两种方法：
一种是采用Vite官方文档所提到的添加@vitejs/plugin-basic-ssl到项目插件中；另一种方法是使用mkcert工具制作本地信任的开发证书。
两种方法都很容易操作，皆可成功启动https环境进行调试。

方法一：使用@vitejs/plugin-basic-ssl插件

@vitejs/plugin-basic-ssl
仓库地址：https://github.com/vitejs/vite-plugin-basic-ssl

1.安装@vitejs/plugin-basic-ssl：

yarn add @vitejs/plugin-basic-ssl -D

2.配置Vite：

import basicSsl from '@vitejs/plugin-basic-ssl'

module.exports = {
  // ...
  plugins：[ 
  	react(),
  	basicSsl(),
  ],
  server: {
  	https: true,
  	...// 其余配置我已省略
  },
};

3.重启

安装完成后重启服务器，即可在https环境进行调试。

方法二：使用mkcert插件

1.安装mkcert

macOs系统：

brew install mkcert // google浏览器
brew install nss // Firefox浏览器

Windows系统可根据官方安装指南进行操作。

2.创建证书

在终端命令行中，使用mkcert生成本地可信的证书。默认使用localhost，你也可以指定多个自定义的主机名。

// 生成只用于'localhost'的证书
mkcert -install
mkcert localhost

// 或者生成用于多个域名的证书
mkcert -install
mkcert example.dev dev.example.com

生成证书完成后，会有此提示：

同时根目录下会生成两个文件：

3.配置Vite

import fs from 'fs';

export default {
  server: {
    https: {
      key: fs.readFileSync('./localhost-key.pem'),
      cert: fs.readFileSync('./localhost.pem'),
      ...// 其余配置我已省略
    },
  },
};

3.重启

安装完成后重启服务器，即可在https环境进行调试。

注意

若浏览器提示不安全，点击高级，继续访问即可。

看到这里，若觉得有帮助的话，各位帅哥美女动动你的小手指，点个赞吧~