关于如何在 vue 开发服务器中开启被浏览器信任的 https

今天碰到个需求，需要在微信公众号网页中扫码。虽然微信提供了扫码的功能，但是根据我之前的开发经验，调试起来极其麻烦，所以这次就想直接打开摄像头。

那么，根据 MDN 上的描述来看，就需要开启 HTTPS，简单的将 vue.config.js 的 devServer 的 https 属性设为 true 后，发现在手机微信中无法打开网页，我估计是因为没有证书的问题。于是我便去问 new bing，下面记录一下配置过程（Windows 10 环境）：

1、前往 GitHub 下载 mkcert。

2、将下载的 mkcert 资源文件重命名为 mkcert.exe

3、打开 cmd 并进入当前目录

4、输入 

mkcert -install

5、输入

mkcert example.com "*.example.com" example.test localhost 127.0.0.1 ::1

如果你还需要其他地址，可以在这串命令的最后添加你需要的地址

6、在项目根目录创建一个 cert 文件夹，将生成的两个文件放到该文件夹中

7、配置 vue.config.js

const fs = require('fs')

module.exports = {
    devServer: {
        https: {
          key: fs.readFileSync('./certs/example.com+5-key.pem'),
          cert: fs.readFileSync('./certs/example.com+5.pem'),
        },
        public: 'https://localhost:8080/'
    }
}

如果你想改变 public 的地址，你需要将对应的 ip 或域名添加到第五步的命令中。注：该行为将导致 pem 文件名与案例不同。

你可以在这里找到上述内容的原始地址。

 

完成了这些之后，我想在手机上试试（注：我的 public 改为了 https://192.168.52.6:8080），发现提示无效的证书，通过 new bing 搜索和我的一些摸索，知道了该如何在手机上安装 CA 证书，下面是配置过程（iPhone 16.1 环境）：

1、在 cmd 上输入以下命令，来获取 CA 证书的位置：

mkcert -CAROOT

2、将该目录下的 rootCA.pem 文件发送到 iPhone 上，并保存到 文件 中。

3、在 文件 应用中找到这个文件并点击一下。

4、打开 设置-通用-VPN与设备管理，安装这个配置描述文件。

5、打开 设置-通用-关于本机-证书信任设置，将该证书设为信任。

现在，你就可以在手机微信打开开发环境的网站了。什么？打不开？要不检查下手机和电脑是不是在同一个局域网下吧。