Vite开发服务器HTTPS配置

Wed, 05 Mar 2025 10:37:25 +0000

考察点分析

核心能力维度：工具链配置能力、Node.js API运用、开发环境安全配置

Vite配置体系理解：是否熟悉vite.config.js结构及server配置项
HTTPS服务配置：掌握Node.js原生https模块的证书加载方式
安全文件处理：正确使用文件系统API读取证书文件
开发环境调试：了解自签名证书的浏览器兼容处理

技术解析

关键知识点

Node.js https.createServer选项格式
fs.readFileSync同步文件读取
Vite开发服务器配置结构

原理剖析

Vite开发服务器底层使用Connect中间件框架，当配置server.https时会透传参数给Node.js的https.createServer方法。证书文件需通过文件系统API加载为Buffer或字符串，配置示例：

 // 典型配置结构
import { defineConfig } from 'vite'

export default defineConfig({
 server: {
 https: {
 key: fs.readFileSync('path/to/key.pem'),
 cert: fs.readFileSync('path/to/cert.pem')
 }
 }
})

常见误区

路径处理错误：未使用path模块导致相对路径异常
同步异步混淆：在动态加载配置时错误使用异步读取
证书格式误解：将PEM格式密钥与CRT格式混淆

问题解答

配置Vite开发服务器HTTPS需在vite.config.js中设置server.https选项。通过Node.js的fs.readFileSync同步读取SSL证书文件，具体步骤如下：

导入fs和path模块处理文件路径
使用绝对路径加载证书文件避免路径错误
将证书内容作为key和cert属性传入配置对象

 import { defineConfig } from 'vite'
import fs from 'node:fs'
import path from 'node:path'

export default defineConfig({
 server: {
 https: {
 // 使用path.resolve处理跨平台路径问题
 key: fs.readFileSync(path.resolve(__dirname, 'localhost-key.pem')),
 cert: fs.readFileSync(path.resolve(__dirname, 'localhost.pem'))
 }
 }
})

解决方案

编码示例

 // vite.config.js
import { defineConfig } from 'vite'
import fs from 'node:fs'
import path from 'node:path'

export default defineConfig({
 server: {
 port: 443, // 标准HTTPS端口
 https: {
 // 支持同时加载多个域名证书
 key: [
 fs.readFileSync(path.join(__dirname, 'ssl/domain1.key')),
 fs.readFileSync(path.join(__dirname, 'ssl/domain2.key'))
 ],
 cert: [
 fs.readFileSync(path.join(__dirname, 'ssl/domain1.crt')),
 fs.readFileSync(path.join(__dirname, 'ssl/domain2.crt'))
 ]
 }
 }
})

优化建议：

安全配置 on ZiYang FrontEnd Interview

Vite开发服务器HTTPS配置

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

常见误区 link

问题解答 link

解决方案 link

编码示例 link