Vite项目配置本地HTTPS

2025年10月13日

当Vite项目以http启动时,在Safari浏览器中会出现BLOCK警告,要求必须在本地开发环境使用HTTPS,可以用 mkcert 库解决这个问题。

mkcert 安装

Mac 环境下可以通过 homebrew 直接安装,安装完成后输入mkcert -install命令将根证书加入本地可信CA。

生成本地证书

输入mkcert localhost 127.0.0.1 会在当前目录下创建仅本地访问的自签证书,并将文件移动到Vite项目中新建的certs目录里。

Vite 配置

在vite.config.js中添加以下配置:

json 复制代码
    server: {
      https: {
        key: fs.readFileSync('certs/XXX-key.pem'),
        cert: fs.readFileSync('certs/XXX.pem'),
      }
    }

重启项目后就可以以https方式启动,使用 Safari 测试也可以正常访问本地项目。

相关文章

React Native 开发环境安装踩坑

《JavaScript 高级程序设计》第10-16章

《JavaScript 高级程序设计》第8-9章 函数&期约与异步函数