Vite搭建HTTPS本地调试环境，畅享音视频接口权限！

2024-01-18 08:34:34

使用 Vite-Plugin-Mkcert 搭建 HTTPS 本地调试环境

在现代 Web 开发中，HTTPS 已成为安全协议的基准。它可以加密在客户端和服务器之间传输的数据，保护数据免遭窃听和篡改。但是，在本地环境中使用 HTTPS 调试应用程序有时可能很困难，因为它需要手动生成和配置证书。这就是 Vite-Plugin-Mkcert 发挥作用的地方。

什么是 Vite-Plugin-Mkcert？

Vite-Plugin-Mkcert 是一个 Vite 插件，它可以简化在本地开发环境中生成和使用自签名 HTTPS 证书的过程。它通过 mkcert 命令行工具自动创建证书，该工具由 Filo Systems 开发并由 Let's Encrypt CA 颁发。

安装和配置

首先，使用以下命令安装 Vite-Plugin-Mkcert：

npm install vite-plugin-mkcert

然后，在你的 Vite 配置文件中添加以下内容：

plugins: [
  {
    name: 'vite-plugin-mkcert',
    options: {
      source: 'auto'
    }
  }
]

source: 指定证书的来源。'auto' 将自动生成证书，而 'path' 允许你使用现有的证书。

运行 Vite 开发服务器

配置好插件后，运行 Vite 开发服务器：

vite

访问 HTTPS 接口

Vite 开发服务器启动后，你可以通过 HTTPS 访问你的本地接口：

https://localhost:3000

浏览器会询问你是否信任该证书。单击“始终允许此证书”以授予信任。

示例代码

以下是使用 Vite-Plugin-Mkcert 在 Vue 项目中生成证书的示例代码：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.mount('#app')

// 在浏览器控制台中，运行以下代码：
fetch('https://localhost:3000/api/data')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err))