最近突然想把自己写过的一些网站加上https，但是光配置生产环境可不行，还得先从本地开发环境入手

修改vue.config.js

修改vue.config.js文件如下，重新运行项目即可开启https

module.exports = {
    devServer: {
        https: true
    }
}

但是现在又遇到一个问题，Chrome不信任默认的自签证书提示证书无效，虽然可以在chrome://flags里面将allow-insecure-localhost开启来屏蔽错误页，但是看着“不安全”三个字还是感觉贼难受

经过几番探寻，我发现可以使用mkcert来生成证书

使用mkcert生成本地HTTPS加密证书

将CA证书加入本地可信CA

$mkcert -install

Created a new local CA 💥
The local CA is now installed in the system trust store! ⚡️
The local CA is now installed in the Firefox and/or Chrome/Chromium trust store (requires browser restart)! 🦊

生成自签证书，mkcert后面可以跟多个域名

$mkcert localhost

Created a new certificate valid for the following names 📜
 - "localhost"
The certificate is at "./localhost.pem" and the key at "./localhost-key.pem" ✅
It will expire on 2 March 2023 🗓

我们可以看到执行命令后生成了两个文件，localhost.pem证书和localhost-key.pem私钥

再次修改vue.config.js

在cert和key处填上相应的路径

module.exports = {
    devServer: {
        https: true,
        cert: '/home/seele/localhost.pem',
        key: '/home/seele/localhost-key.pem'
    }
}