vue3使用自签证书，设置本地https访问

使用自签证书，OpenSSH签发：

PARENT="localhost"
openssl req \
-x509 \
-newkey rsa:4096 \
-sha256 \
-days 365 \
-nodes \
-keyout $PARENT.key \
-out $PARENT.crt \
-subj "/CN=${PARENT}" \
-extensions v3_ca \
-extensions v3_req \
-config <( \
  echo '[req]'; \
  echo 'default_bits= 4096'; \
  echo 'distinguished_name=req'; \
  echo 'x509_extension = v3_ca'; \
  echo 'req_extensions = v3_req'; \
  echo '[v3_req]'; \
  echo 'basicConstraints = CA:FALSE'; \
  echo 'keyUsage = nonRepudiation, digitalSignature, keyEncipherment'; \
  echo 'subjectAltName = @alt_names'; \
  echo '[ alt_names ]'; \
  echo "DNS.2 = ${PARENT}"; \
  echo '[ v3_ca ]'; \
  echo 'subjectKeyIdentifier=hash'; \
  echo 'authorityKeyIdentifier=keyid:always,issuer'; \
  echo 'basicConstraints = critical, CA:TRUE, pathlen:0'; \
  echo 'keyUsage = critical, cRLSign, keyCertSign'; \
  echo 'extendedKeyUsage = serverAuth, clientAuth')

openssl x509 -noout -text -in $PARENT.crt

添加到本地计算机受信任证书不再赘述，然后把证书保存到{项目}\src\cert中

最后在{项目}\vue.config.js中修改配置

const {defineConfig} = require('@vue/cli-service');
//引用path
const path = require("path");
//引用fs
const fs = require("fs");

module.exports = defineConfig({
    transpileDependencies: true,
    server: {
        // 是否自动打开浏览器
        open: true,
        https: {
            // 配置证书
            cert: fs.readFileSync(path.join(__dirname, "src/cert/localhost.crt")),
            // 配置证书密钥
            key: fs.readFileSync(path.join(__dirname, "src/cert/localhost.key"))
        }
    }
})