vue本地开发服务器http变为https

426 阅读1分钟

背景

众所周知,我们在开发web项目时,如果需要用到一些涉及使用摄像头、麦克风之类的功能时,网站是需要https协议才能申请权限的。

这样就会导致我们在开发过程中想测试相关功能的话很不方便。

因为我们本地运行都是http协议,想要测试功能得将还没调试好的代码打包更新到测试环境才能测试功能(这很麻烦,改点代码就得更新,不利于调试)

解决方法

  1. 项目配置 HTTPS
  2. 使用 http-server 启动 HTTPS 服务
  3. 使用 ngrok 创建 HTTPS 隧道

这里列出了3种方法,我选择了第三种

因为第一和第二种都是需要SSL证书和相关密钥的,生成的方法网上有但是比较繁琐,我们直接选择ngrok

ngrok

首先打开window命令行窗口

  1. 在命令行窗口运行:npm install -g ngrok
  2. 注册/登录ngrok:
https://ngrok.com/

  1. 在命令行窗口运行:ngrok config add-authtoken '你的authtoken'

  2. 在命令行窗口运行:ngrok http '你的项目端口'

注意事项:

ngrok的官网需要魔法访问

第二步是配置ngrok的authtoken(官方要求了必须配置了才能使用)

注册/登录后在仪表盘可以获取到authtoken,如下图 image.png