最近突然想把自己写过的一些网站加上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'
}
}
Comments | 1 条评论
是大佬,太强了,学到很多!