Vite 如何在本地 localhost 环境支持 https？

在开发过程中，使用 HTTPS 可以帮助模拟更接近生产的环境，并且对于开发某些需要安全上下文的功能（如服务工作线程、HTTP/2 等）是非常有用的。Vite 作为一款现代化的开发工具，支持在本地环境中启用 HTTPS。下面是具体的步骤和解释：

第一步：生成 SSL 证书

首先，你需要为本地服务器生成 SSL 证书。可以使用多种工具来完成这一任务，例如 mkcert 是一个简单的选项。

1. 安装 mkcert

   bash
   # 安装 mkcert（在 macOS 上）
   brew install mkcert
   
   # 安装 mkcert（在 Windows 上，使用 Chocolatey）
   choco install mkcert

2. 创建本地证书颁发机构

   bash
   mkcert -install

3. 为 localhost 生成证书

   bash
   mkcert localhost

   这将生成两个文件：localhost.pem（证书文件）和localhost-key.pem（密钥文件）。

第二步：配置 Vite

接下来，你需要在 Vite 项目中配置 HTTPS。

1. 编辑 Vite 配置文件（例如 vite.config.js） 在 Vite 配置中，你可以提供一个自定义的服务器选项，包括 HTTPS 配置。

   js
   import fs from 'fs';
   import { defineConfig } from 'vite';
   
   export default defineConfig({
     server: {
       https: {
         key: fs.readFileSync('path/to/localhost-key.pem'),
         cert: fs.readFileSync('path/to/localhost.pem')
       }
     }
   });

   确保替换 'path/to/localhost-key.pem' 和 'path/to/localhost.pem' 为你存储证书和密钥的实际路径。

第三步：启动 Vite 项目

最后，只需像往常一样启动你的 Vite 项目。如果一切配置正确，Vite 将通过 https://localhost:3000（或其他配置的端口）提供服务。

bash
npm run dev

或

bash
yarn dev

总结

通过以上步骤，你可以在本地开发环境中配置 Vite 以支持 HTTPS，这有助于模拟生产环境并且可以安全地测试需要 HTTPS 的功能。使用工具如 mkcert 可以简化证书的生成和管理过程，使得开发更加高效便捷。