windows下的vue-cli中如何配置https
下载与使用mkcert
github:https://github.com/FiloSottile/mkcert
下载：https://github.com/FiloSottile/mkcert/releases/tag/v1.4.4
国内gitee:https://gitee.com/mirrors/mkcert 无法下载
我的百度网盘下载链接：https://pan.baidu.com/s/1MsG0LhEN4E1_zgrpBeDBaw?pwd=ixvj提取码：ixvj
下载后，我们将安装文件exe放入到我们项目的新建目录-cert中，比如，我项目目录如下：
D:\code\spring-card\spring-card\cert\mkcert-v1.4.4-windows-amd64.exe然后打开cmd，进入到如上的cert目录中，执行：
cert>mkcert-v1.4.4-windows-amd64.exe -install在弹出的对话框中选择“信任”，执行成功后，会提示：
Created a new local CA
创建了新的本地CA
The local CA is now installed in the system trust store!
本地CA现在已安装在系统信任存储中！这时候，我们打开chrome浏览器-设置-隐私和安全--滚动到最底部-管理证书-受信任的根证书颁发机构里，可以找到如下所示的证书：
而生成的根证书，则在文件夹C:\Users\你的用户名\AppData\Local\mkcert中，比如我的目录就是C:\Users\13505\AppData\Local\mkcert，其中存在文件rootCA-key.pem 和 rootCA.pem 即是根证书。
有了这些还不够，还需要生成服务端的证书。我们先执行一次npm run serve，知道本地的ip地址，比如我的：
App running at:
- Local: https://localhost:8080
- Network: https://192.168.1.103:8080我们继续在项目的cert目录下，执行：
mkcert-v1.4.4-windows-amd64.exe 192.168.1.103随即会生成两个证书：
192.168.1.103.pem 和 192.168.1.103-key.pem
在vue.config中配置
找到项目目录中的vue.config.js文件
const { defineConfig } = require('@vue/cli-service');
const fs = require('fs');
module.exports = defineConfig({
publicPath:'',
transpileDependencies: true,
// 配置https
devServer: {
// 配置自动启动浏览器
open: true,
// host: '0.0.0.0',
port: 8080,
https: {
key: fs.readFileSync('cert/192.168.1.103-key.pem'),
cert: fs.readFileSync('cert/192.168.1.103.pem'),
}
}
});添加devServer，并且在https属性中，分别引入证书文件。
然后再启动项目，浏览器访问https://192.168.1.103:8080发现可以正常访问，则代表配置成功了。
注：提供以下写法可以参考：
devServer: {
open: true,
host: 'tst.com',
// port: 80,
allowedHosts: [ 'tst.com' ],
https: {
cert: fs.readFileSync(path.join(__dirname, 'ssl//huiwen.crt')),
key: fs.readFileSync(path.join(__dirname, 'ssl//huiwen.key'))
},
}
目录