前言在《一篇带你用 VuePress + Github Pages 搭建博客》中，我们使用VuePress搭建了一个博客，最终效果查看：TypeScript中文文档。如果我们在本地运行项目，运行地址类似于http://localhost:8080/learn-typescript/，以http开头，可以满足大部分时间的需求，但是有时候，比如兼容PWA，就需要要使用https，我们如何在本地使用https地址呢？开启HTTPS在VuePress官方文档中，我们没有找到直接的答案，但是我们可以在StackOverflow中找到答案，其实我们可以直接在config.js中添加：module.exports={devServer:{https:true}我们试一下，访问地址，会出现不安全的提示：我们在“高级”中点击“继续到本地主机（不安全）”，可以访问页面，但是地址栏会显示一个“不安全”：HTTPS原理想一想那么，我们没有SSL证书，怎么判断是安全连接呢？那么浏览器如何判断为安全连接呢？先简单回顾一下HTTPS的原理：首先是CA，英文全称：CertificateAuthority，中文翻译：数字证书认证机构，是负责颁发和管理数字证书的权威机构，是受信任的第三方机构.CA颁发的根证书将内置于计算机系统和浏览器中。然后就是建立HTTPS的过程。当客户端向服务器发起HTTPS连接时，服务器会将自己的证书发送给客户端。证书包含公钥，客户端将查找颁发证书的CA的根目录。如果有证书，则对证书进行解密验证，防止证书被篡改。如果通过，客户端会生成一个随机字符串，然后用服务器证书中的公钥加密，然后发送给服务器。服务器使用私钥进行验证。对密文进行解密得到一个随机字符串，然后两端使用这个随机值进行加密通信。那么对于服务器来说，需要有两个东西，一个是包含公钥的服务器证书，一个是私钥。对于客户端，需要CA根证书。mkcert为了实现本地HTTPS连接，我们可以使用mkcert工具来实现证书的配置：mkcert是一个方便的创建本地可信开发证书的工具。在本地开发环境中，很难使用真正的CA（CertificateAuthority）颁发的证书，尤其是对于example.net、localhost或127.0.0.1这样的主机，使用真正的CA颁发证书是不可能的。在这种情况下，自签名证书可能是唯一的选择。mkcert可以生成自签名证书并将本地CA安装到系统根证书库中。1.安装mkcertbrew安装mkcert2。创建本地CAmkcert-install生成后，在Mac中，我们可以通过“KeychainAccess”查看这个证书：3.生成证书mkcertlocalhost127.0.0.1这样会在当前目录下生成两个证书文件：localhost+1-key。pem和localhost+1.pem，其中localhost+1.pem为服务器证书，localhost+1-key.pem为私钥。4.修改config.js然后我们将这两个文件复制到和config.js文件相同的目录下，然后修改config.js：constfs=require('fs')constpath=require('path');module.exports={devServer:{https:true,key:fs.readFileSync(path.resolve(__dirname,'./localhost+1-key.pem')),cert:fs.readFileSync(path.resolve(__dirname,'./localhost+1.pem'))}}5.重新运行项目再重新运行项目，你会看到：如果证书显示有效，但仍然显示不安全连接，重启浏览器或打开隐私窗口试试。系列文章博客搭建系列是我目前为止写的唯一实用系列教程。预计20篇左右，讲解如何使用VuePress搭建和优化博客，并部署到GitHub、Gitee、私服等平台。本文为第22篇，全系列文章地址：https://github.com/mqyqingfeng/博客微信：“mqyqingfeng”，加我到SaeYu的唯一读者群。如有错误或不准确的地方，请务必指正，万分感谢。如果你喜欢或者有启发，欢迎star，这也是对作者的鼓励。
