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

在现代 Web 开发中，HTTPS 已经成为标准配置。本地开发环境中使用 HTTPS 也能带来诸多益处，因此本文将介绍如何在 Vite 项目中配置和使用 HTTPS 证书进行本地调试。

本文目录

• 前言
• 为 Vite 项目开启 HTTPS 调试
• 保护敏感文件
• 自签 SSL 证书
• 启动 HTTPS 服务器

前言

在 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) 策略。

版权信息 (点击展开)

Copyright (c) @ Hat's Blog www.hats-land.com
Released Date @ 2024-09-22
GPG Signature: 'https://www.hats-land.com/gpg-public.txt' (F166C5F4F897B96A07390B8574E3D911A0E70FEC)

// -----BEGIN PGP MESSAGE-----
// 
// hF4DYvdQZ6S+TycSAQdAOPKcBoYz02T0Kk8UQhub4FmzqpA+L388ZapUO15B4j8w
// 24WwxT1blkN6nrFnkrA/ygYDn8F4ByfKFl8nDMb63MhUbGFngejdZROFU3u4MqZx
// 1MBOAQkCEE5lRsF4NOvbDyggR7/CiFCJ+ML+grnWN0Y+UgSRX3/Y3eiECXFZ8aMv
// kBHtp37IblBxs4+bPrPHAXWlsTaPQfHpas5NPPOFe8ZIKtF2dqgppntVPHBLpdWO
// RauQ2zmjpn2nwxyN120CQvgZFVZDk97TQ5vb3/Yi4g32Jg9cfowi/tu8kAgemDMU
// FobCbnIZvaEfoEmlmnvhKrky9dE+MIbaHAan69tswSp2MBEBMX9MO5JoempKMXpS
// oa9P7yYeD8tN6OVZyPN4g+DWJqiA9RAiRYxaR7RBAgEqU/ap0nu6nmaqVUyT2yu/
// m1+gtbbyn64cans2aLeGlMdO7lD3AFhG5ccThs3xOZEa
// =vw/7
// -----END PGP MESSAGE-----