本地调试 https

最新推荐文章于 2025-03-25 19:42:20 发布

原创最新推荐文章于 2025-03-25 19:42:20 发布 · 343 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#https #网络协议 #http

前端开发，正常情况是不需要用到 https，免不了一些比较特殊的功能需要 https 才能调试，之前做的拍照扫码之类的，要用到摄像头，电脑 localhost 可以直接用，想用手机去测试就得 https。

如果都是用 webpack、vite 等搭建的项目，自带提供了 https 的启动。低版本是不支持的，webpack 要 v4.4.0+，直接配置启动：

devServer: {
  server: 'http',
}

vite 看了一下文档，vite2 的文档搜索 https 没有给出文档，vite3 搜索 https 提供了一个官方推荐的插件@vitejs/plugin-basic-ssl：

import basicSsl from '@vitejs/plugin-basic-ssl'

export default {
  plugins: [
    basicSsl()
  ]
}

除了自带的会很方便调试，其他就得自己本地安装证书了，用 OpenSSL 之类的，按照文档一步一步下来应该也能实现，只不够对于小模块功能调试，最理想的还是能快速启动，而不是还需要生成配置之类的。大部分前端，对于这块还是不懂的（包括自己）。

推荐一个 npm 包，browser-sync，除了这次想说的可以启动 https,这个包还可以实现热更新，对于一些老旧项目还是挺有用的。今天只介绍怎么启动 https。

npm install -g browser-sync

//启动文件
browser-sync start --server --https --files "index.html"

//代理其他server成https
browser-sync start --https --proxy "192.168.199.88:8080"

其实调试时候的证书，不用考虑安全、时效，这个包真的是很方便，可以节省很多时间。当然，如果想要学习了解本地怎么安装证书怎么启动 https 之类的，那就去捣鼓吧。

顺便推荐一下启动静态服务的两个包：http-server、anywhere，两个功能其实都差不多，最早是用 http-server，有一段时间因为一直报错，就换成 anywhere，应该有很多类似的包。随时把当前目录变成静态文件服务器，也就是用 node 实现。

vscode 也有 live server 插件也可以实现类似的功能，现在类似的轮子非常的多。

tips：el-dialog 闪烁

最近用 element 的 el-dialog，显示隐藏的时候会闪烁，同一项目，只有一个页面会，清除所有代码，还是会，看起来就像显示隐藏显示。最后用定时 100 毫秒去控制显隐，发现可以，再用提供的 open-delay/close-delay，时间也是 100 毫秒以上，发现也能解决问题。也不知道是为啥，在此记录一下。

欢迎关注个人订阅号 coding个人笔记