在 Vite 开发环境中优雅地开始 HTTPS 调试

2024-08-28 09:01   folder 技术 label 前端开发环境

前言

在 Web 开发领域，HTTPS 已成为不可或缺的标准。尽管 Web 标准将 localhost 视为类似于 HTTPS 的“安全域”，但在本地开发环境中配置 HTTPS 调试仍然重要。

本文将围绕 Vite 项目介绍如何配置和使用 HTTPS 证书进行本地调试，当然其他工具链也同理可用。

为 Vite 项目开启 HTTPS 调试

Vite 提供了便捷的 HTTPS 配置选项。您只需在项目根目录下的 vite.config.js 中添加以下代码即可启用 HTTPS：

import { defineConfig } from 'vite';
import fs from 'fs';
import path from 'path';

export default defineConfig({
  server: {
    https: {
      key: fs.readFileSync(path.resolve(__dirname, 'localhost.key')),
      cert: fs.readFileSync(path.resolve(__dirname, 'localhost.crt')),
    },
    // ... 其他 vite 配置
  }
});

这段配置告诉 Vite 使用指定的私钥（localhost.key）和公钥文件（localhost.crt）启用 HTTPS。

保护敏感文件

如使用 git 管理项目，可以在 Vite 项目的根目录下创建一个名为 .gitignore 的文件，并添加以下内容：

# 忽略本地证书文件
localhost.key
localhost.crt

这样可以防止本地证书文件被提交到 Git 仓库中，以避免杯具的发生。

自签 SSL 证书

要使用 HTTPS，你需要一个 SSL 证书。对于本地开发环境，我们通常使用自签名证书。

你可以手动生成这些证书，但为了简化过程，我也写了一份实现更加简单的 自动生成自签名证书脚本 指南，仅供参考。

启动 HTTPS 服务器

完成上述配置后，即可使用以下命令启动 Vite 开发服务器：

npm run dev

现在，你能够使用 https://localhost:3000 访问你的 Vite 项目。

请注意甄别前端项目中是否有引用硬编码为 http:// 的资源，以防止触发浏览器的混合内容 (Mixed Content) 策略。