vue项目，uni-app h5项目本地调试开启https，获取本地自签名SSL/TLS证书

前言

最近开发用到一个功能调用摄像头扫码，获取地址位置时需要https的问题，这里利用mkcert获取证书认证。

我以uni-app h5项目为例

mkcert简介

mkcert 是一个用于创建本地开发用的自签名SSL/TLS证书的工具，它简化了为本地域名（如 localhost 或者 .dev 等）生成受信任的HTTPS证书的过程。使用 mkcert 生成的证书会被自动安装到系统的根证书存储中，因此浏览器和其他客户端会信任这些证书，而不会显示安全警告。

下载安装

mkcert下载地址

我用的是windows10

下载后在该文件目录下打开cmd,这里要以管理运行方式打开cmd 执行以下命令

mkcert-v1.4.4-windows-amd64.exe -install

第一次执行该命令可能有安装警告框弹出，点击是即可

安装成功成功。提示创建一个新的本地CA，本地CA现在已安装在系统信任存储中。

生成自签证书

安装后执行以下命令生成自签证书, 直接跟多个要签发的域名或 ip 就行了，比如签发一个仅本机访问的证书(可以通过127.0.0.1和localhost，以及 ipv6 地址::1访问)：

mkcert-v1.4.4-windows-amd64.exe localhost 127.0.0.1 ::1 192.168.2.xx

在mkcert安装目录下，生成了自签证书。如图所示：

通过输出，我们可以看到成功生成了localhost+3.pem证书文件和localhost+3-key.pem私钥文件，只要在 web server 上使用这两个文件就可以了。

使用证书

uni-app h5项目

uni-app项目需要手动复制cert和key

注意：复制粘贴时换行加\n,组成字符串

"h5" : {
        "devServer" : {
            "port" : "8888",
            "https" :{
			    "cert":"-----BEGIN CERTIFICATE-----\nMIIEazCCAtOgAwIBAgIRANif2TGWPWGovtC3ib1b8NEwDQYJKoZIhvcNAQELBQAw\ngYkxHjAcBgNVBAoTFW1rY2VydCBkZXZlbG009wbWVudCBDQTEvMC0GA1UECwwmREVT\nS1RPUC1VTVBWQTlFXHBsdC0wOUBERVNLVE9QLVVNUFZBOUUxNjA10BgNVBAMMLW1r\nY2VydCBERVNLVE9QLVVNUFZBOUVccGx0LTA5QERFU0tUT1AtVU1QVkE5RTAeFw0y\nNDEyMTMwNzAxNDZaFw0yNzAzMTMwNzAxNDZaMFoxJzAlBgNVBAoTHm1rY2VydCBk\nZXZlbG9wbWVudCBjZXJ0aWZpY2F0ZTEvMC0GA1UECwwmREVTS1RPUC1VTVBWQTlF\nXHBsdC0wOUBERVNLVE9QLVVNUFZBOUUwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAw\nggEKAoIBAQDPSqFgS8P/Y0K0D0Hby2S2huBIsKVbH770zSWRef/WRLxN6olUZjEh\n5lGPX4AZfUJIglQPiCG2i2SALOHg/yLIdpVVLLymfTA6Im7fwgMwdnY3Rl+NgmvJ\nUGsjV0t0wSe5zo+5zqzEJx9NdBze8C/a0D7HOevPbtgyxDBK4d4FqCtXn0VxoxPY\nLoxpIG8g2ShSrQgUQ/aIrJnl+QT1bA++ylKrV61CVeZdJos8W7li8OdvSV84BKDVg\nWikYC5PMh46SmvNhDlpzmTocbf+M/T2XIM8Ya1p+3vx2khfZDDEg1YdhFebs6t+m\nXxH3uUmCcLuXWHjRA6+d1NcoApzVnMxZAgMBAAGjfDB6MA4GA1UdDwEB/wQEAwIF\noDATBgNVHSUEDDAKBggrBgEFBQcDATAfBgNVHSMEGDAWgBQZYzOw4te/5AfUcEiH\nn/nk0K0M/jAyBgNVHREEKzApgglsb2NhbGhvc3SHBH8AAAGHEAAAAAAAAAAAAAAA\nAAAAAAGHBMCoAUswDQYJKoZIhvcNAQELBQADggGBAAIJPSZ1+VPPkioYeaB1SJTv\n2DH/mhdQcKaIXfH0Tdx/CgBUAHLjs02RNXOb937Fu71RD9/SPGG+ptiYk3pjVGAg\nV/KqualNAVjZOwOMgsXdxd3XcoSjXNhG6hPx66yicUBWzbJM9lTpNUMaF5aXwsZf\n2gf/NwU7c1VHRAbIaE94S/dQ2mGGIT92CSuKIX9LFlFxi00epxjq4lrTLDHM57Sc/g\nm3tMW/L/0A/c+v1sdCnI3W+319YzmIW0ThyuVTzgSwYiXWGw0bOeVCj4N99Qi+s3\nNDpgnXDVYdsDlDcaXrtVnfS88rb5abTBFFWTS9b3maZ7mXZ0cabN+XdzoNI7jgke\nL59oO+af0l8m4MekdVXvNvyljbjLN/rib1kz902RQJga8IqobZT2QfbziLEtQzqZ\nU2EzyKD07gn9RQmvW6TMBQr3Y3UJj3loCRewSYYO1VYpN+eCLcsQOT/vka6EVHaN\namb/zmQKkDvFOPLjNJZZJpncN/c3xW4RXdgRnl8hHw==\n-----END CERTIFICATE-----\n",
			    "key":"-----BEGIN PRIVATE KEY-----\nMIIEvgIBADANBgkqhkiG9w0BAQEFAASCBKgwggSkAgEAAoIBAQDPSqFgS8P/Y0K0\nD0Hby2S2huBIsKVbH770zSWRef/WRLxN6olUZjEh5lGPX4AZfUJIglQPiCG2i2SA\nLOHg/yLIdpVVLLymfTA6Im7fwgMwdnY3Rl+NgmvJUG00sjV0t0wSe5zo+5zqzEJx9N\ndBze8C/a0D7HOevPbtgyxDBK4d4FqCtXn0VxoxPYLoxpIG8g2ShSrQgUQ/aIrJnl\n+QT1bA++ylKrV6CVeZdJos8W7li8OdvSV84BKDVgWikYC5PMh46SmvNhDlpzmToc\nbf+M/T2XIM8Ya1p+3vx2khfZDDEg1YdhFebs6t+mXxH3uUmCcLuXWHjRA6+d1Nco\nApzVnMxZAgMBAAECggEAW1v1C8/YrjI9L8aZrBlUZe3D48WW2zZ+nr3blOZED1dz\n9pMru3repKYxxBK/DnzaPcLS8ZV55k5BGQyu8M8BsYAyCLwS2P3Lx5Ntcki7xxwu\nteXaLzAP+UXsMkNDCk4nCAk15xpjon/rl+NY5hjNvo006RXJT2jRG5T4aQEjDB/ZN5\nfLBlnMZD+US+CP3WbIn9gPlaXfz/+QMlw+utTaJObM64HAPxqVPOHdMZ+n18Xn9wc\nyFKYp2/9MZ9S9xtg/CDpO+d88z1y7ibFKNK+4HsbTjal7laW59OM8tQTNBwTGpQr\n3//dkHVn+jvBZTxbRu2IJx9pCs7AyWidH/YAlG3mAQK00BgQDe/xaMIt6YcHh7BBtJ\ndAvcvuaQjErtA1SY0zQNn1ktcgZsrLLUzJkx5AX4o8RmtATpbY8vaIhwX5k2bLE/\nX0SbQXLzgVpPyI/a2rYuys85EsE9SogAlOsjOIVDKfL1epYl42okLTlpGoxRctdo\nm8oOLDCGcu8i8ETL9/PPw3JDsQKBgQDt+INQklckFzFpg2da1QlVQ84qdsi75fVs\nLrp2Iw/Df/Kv5+seRUPhN4OY9i9+HOC084UA7CTHyhT23dn07E4kKbEMyimeAsP/\nkzAbdorwi7rknJrgQZGIbQPg+/cZfEdV96oCfSidKCJYbDpBldk0czUiLDyB+FGg\nHfwl/7WFKQKBgQCdLutCvjVu+CBEfeGKBg1yfPFiRDFwHV/dFUpkq8SdPvl+UsD/\nNHRrcVIwL6d5yTyJGVvLTACYTRpe/YB2rf1a/mg7chspj7KuzmmKVBR7I1gojseM\nuWuA+Q8eB4ylMdJyRHmFpIcKKddsdemWZ/Glycouiwc69mdX6p/l+9soEQKBgQDi\n5zeGZtLyFa9GtUWiZUlN51KY69SH3j4/QhEnEhS/tsB0ePxt/tHn000B0CYJfovQSwaz\nYxMpywBTA8uzi9vb3kmvz5UC5eyCvo5WLekL9p8KN6GPhAdk1wBGPfQZ3QZCZa67\nOLgBQYetOexttVxi1tfRXByIpfdX0gc6jfyz2rsg6QKBgEd5EtyHjH7lX8ZGKHzs\npqHbh6rhP0XAHHt16WX38GCabm2OdEjyfNamqSeqa16GbTIKA0HupDsLsfoUdQf/\nSSVz0KOCpVhMElu57FUUL+6dwE48RT17UJ2bbSd996p8IJR8bBg8a/L3rPc7ly/D\nFYZXU8PnjChEju+3rZ+Eca/J\n-----END PRIVATE KEY-----\n"	
	        }
        }
    }

Vue3项目

Vue3项目就简单了

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const fs = require('fs')
const path = require('path')
export default defineConfig({
  server: {
    open: true,
    https: {
      // 主要是下面两行的配置文件，不要忘记引入 fs 和 path 两个对象
      cert: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.crt')),
      key: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.key'))
    }
  }
})

总结

以上操作完，项目就跑起来了