前端实现本地服务上启用 HTTPS

前言

最近遇到一个这样的问题，在开发需求的调试时候，需要使用https环境，但本地直接起得服务是http的。所以就用了一个这样的插件 @vitejs/plugin-basic-ssl 解决了这个调试问题。

使用

1. 安装 @vitejs/plugin-basic-ssl

npm install @vitejs/plugin-basic-ssl -D

2. 修改 vite.config.js 配置文件

import basicSsl from '@vitejs/plugin-basic-ssl';
export default defineConfig(({ command, mode, isSsrBuild, isPreview }) => {
    return {
        plugins:[
            basicSsl()
        ]
    }
})

3. 启动服务

npm run dev

结果

常见问题

由于使用的是自签名 SSL 证书，浏览器会提示“不安全的连接”，可以通过 临时信任：浏览器中点击“高级” → “继续访问”。