配置vue基于https链接

217 阅读1分钟

1.工具用的是mkcert github.com/FiloSottile…

2.可以使用choco install mkcert安装

3.生成证书,比如你本地机器的IP是

mkcert localhost 127.0.0.1 ::1 192.168.1.14

4.会在当前目录生成两个文件,一个私钥localhost+3-key.pem,另一个是公钥localhost+3.pem。

5用mkcert -install来安装

  1. windows上运行命令mmc或者inetcpl.cpl 可以看到证书

image.png

点击添加/删除管理单元

image.png

点击证书,点击添加

image.png

按确定后

image.png

可以找到以mkcert开头的证书

image.png

7.在vue.js2代码里面的配置文件vue.config.js

const path = require('path')
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    https: {
      // these files are generated by running the above shell script
      key: fs.readFileSync(path.resolve(__dirname, 'src/ssl/localhost+3-key.pem')),
      cert: fs.readFileSync(path.resolve(__dirname, 'src/ssl/localhost+3.pem')),
    },
}
})
  1. 重启chrome后就会发现是https链接了。

image.png