前端如何让本地项目运行起来的地址是https

背景：最近做的一个uniapp项目中需要在h5中支持调用摄像头扫描二维码的功能，但是这个功能前提是必须要启用的是https协议才行，然而本地运行的话只是http协议，所以自己自测的时候没有任何效果。然后就在网上搜索。果然找到了一个叫mkcert的插件

步骤1⃣️：安装mkcert

npm install -g mkcert

步骤2⃣️：生成证书

mkcert create-ca
mkcert create-cert

然后你就会发现在项目中会多出4个文件

步骤3⃣️：加载证书📄

mac

双击ca.cert，在弹出的界面选择Test CA，选择“信任”，然后选择“始终信任”，最后输入密码确认即可

windows

双击ca.crt，在弹出的界面中选择安装证书，选择“当前用户”或“本地计算机”均可，关键的是下一步，选择“将所有的证书都放入下列存储”，并且选择为“受信任的根证书颁发机构”，然后一路确定即可

mac和window是有区别的，因为本人使用的是mac，然后上面的说法我试了一下，好像没有什么效果，反正就稀里糊涂的，但是请坚持住往下看✊

步骤4⃣️：在vue项目或uniapp中使用刚刚的证书

• vue2项目中（本人没有实测过）

• • 将刚刚生成的cert.crt和cert.key两个拷贝到项目的src/ssl文件夹中

// vue.config.js
const path = require('path')
const fs = require('fs')
module.exports = {
  devServer: {
    open: true,
    https: {
      cert: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.crt')),
      key: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.key'))
    }
  }
}
  

• vue3项目中（本人没有实测过）

• • 将刚刚生成的cert.crt和cert.key两个拷贝到项目的src/ssl文件夹中

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const fs = require('fs')
const path = require('path')
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.join(__dirname, 'src')
    }
  },
  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'))
    }
  }
})

• uniapp中

• • uniapp中不一样，需要手动复制cert.crt和cert.key到manifest.json中来的

    // manifest.json
"h5" : {
        "devServer" : {
            "https" : {
               "cert" : "-----BEGIN CERTIFICATE-----\nMIIDTTCCAjWgAwIBAgIGMTQxNDYyMA0GCSqGSIb3DQEBCwUAMF4xEDAOBgNVBAMT\nB1Rlc3QgQ0ExCzAJBgNVBAYTAlVTMRMwEQYDVQQIEwpDYWxpZm9ybmlhMRYwFAYD\nVQQHEw1TYW4gRnJhbmNpc2NvMRAwDgYDVQQKEwdUZXN0IENBMB4XDTI0MDgxMjEw\nMTUzOFoXDTI1MDgxMjEwMTUzOFowFDESMBAGA1UEAxMJbG9jYWxob3N0MIIBIjAN\nBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAwH7oQFJzf8Z7GrIp5s2Mcbawo6gn\n5zf/p6dsfJRXyCVp/x6Ac9O7MS6j//ETYUQzXaNhwKayN4nl5z4HvvvHYrFQqCOd\n9MYH1DK5LyUf3aX1EqJumGNTYb6OGlEGN6NAcaL+9Rgc1xKdAYIwWNNzDEQYcyRE\n68T8d3+0C52P7sKclByLptBDPPTUpWA28WrgWWAbBtcKh2RAQYdEsiIr+/fvPWse\n1oA5n2SCVbiEUyeJUzwqw077prDIkree/MO8Bi1CIcLMNPopu9SQx0G1Xu6Kl0kr\nUMMfhlBH2x+ifiWXWU245mkBW3zFo8WiFgZDsYhZrBkiTwt767QHPQm0VwIDAQAB\no1swWTAMBgNVHRMBAf8EAjAAMA4GA1UdDwEB/wQEAwIFoDAdBgNVHSUEFjAUBggr\nBgEFBQcDAQYIKwYBBQUHAwIwGgYDVR0RBBMwEYIJbG9jYWxob3N0hwR/AAABMA0G\nCSqGSIb3DQEBCwUAA4IBAQAmAyez0bY18u5091WvwRuUbf7Yz0VrcSlN8HrayThh\nwA200x88/ampUfcBILeAT8liz87U9L+8YoNS2ZzdpsckxKH2+rGSZ9y4wZMAfkGN\nJ40q8JQR2k5ZBuBTGpoRg/Ue/L4r6klw5TlQ2o4qZFVVqrLH6E4t2N9rlqJnK2Lz\n8nlHEYl712NXzyGjtQoNcaaH2/xMEjhoNmT9mGhZi0c6O7te5znXAMcN+Y5XS83J\nn7KCQaJ2lhW2AacBzkAyAeL/oQkBxB3EelVKUAYbRXzG+znl5di4uQE4bWE2d2Ls\nDV0R2HiU5R9vgwPanLqO2T0o4QCxNQv1UWVRB9uHUJx/\n-----END CERTIFICATE-----\n-----BEGIN CERTIFICATE-----\nMIIDXzCCAkegAwIBAgIGMTM0OTA3MA0GCSqGSIb3DQEBCwUAMF4xEDAOBgNVBAMT\nB1Rlc3QgQ0ExCzAJBgNVBAYTAlVTMRMwEQYDVQQIEwpDYWxpZm9ybmlhMRYwFAYD\nVQQHEw1TYW4gRnJhbmNpc2NvMRAwDgYDVQQKEwdUZXN0IENBMB4XDTI0MDgxMjEw\nMTUzN1oXDTI1MDgxMjEwMTUzN1owXjEQMA4GA1UEAxMHVGVzdCBDQTELMAkGA1UE\nBhMCVVMxEzARBgNVBAgTCkNhbGlmb3JuaWExFjAUBgNVBAcTDVNhbiBGcmFuY2lz\nY28xEDAOBgNVBAoTB1Rlc3QgQ0EwggEiMA0GCSqGSIb3DQEBAQUAA4IBDwAwggEK\nAoIBAQCRoKWDR/BNjn9O1YHRC3XvtOzjXNaG3hv5eGI/fc+EKGdsLA0I5pYyYJEL\nv27tSt+OKyVaRm76/Cm53aU7iyM8/fdi0eX4vv+DjB9uOCYjGwNJ6nAujTh+oULO\nTyejtkQsJam08V/fsifGvGc3byVOM2e+qLU6YBhBH1WHPSonem6q0VD0f9i51p61\nPL6e5/E1Vpzg4fgV0OA9cyEb72l0NFds9Vqt9xvgnjgrhVna1bpOpJ8eSFCmFTdk\nKRm49tuRv8eF1YLsae/NbAKblJM9WOdR+2tj0pK4y9s7ka1KELE6Vw6emHjx25IC\n7tWE9CA+9wASTtuht7yHsBkqFhFfAgMBAAGjIzAhMA8GA1UdEwEB/wQFMAMBAf8w\nDgYDVR0PAQH/BAQDAgIEMA0GCSqGSIb3DQEBCwUAA4IBAQBoNbsasRp4HTPpY3OS\n9s2icK0vtyfWwKtUQJJ+BjR0iyIiEwcoWROlycDseXh2DlT03yI59a2GMwBNSMbq\n8UNvLR30dwb3Kv8DuxXH/YHWHXZU47weJ9z5pV52ReY+sdArSF6e+NWUSTRRPUQ4\nydDRlz1lWXkOht95R4KcxfFDySEDxovyAkB8TPPe29zKhuveVSin3koxpo9d4Ys2\nLkt4uV029lg1RMuezuC1BMcCbok5crH7g1siPVtsC+nqrn345YI22YG9tYSJnW0q\nR/oIodpbaUjEa+EVbFTMCt8v89Hiv8joGFDWt5CFniC4X1RSiHpdMTq3ES6w+xPB\nsIX9\n-----END CERTIFICATE-----\n",
                "key" : "-----BEGIN RSA PRIVATE KEY-----\nMIIEowIBAAKCAQEAwH7oQFJzf8Z7GrIp5s2Mcbawo6gn5zf/p6dsfJRXyCVp/x6A\nc9O7MS6j//ETYUQzXaNhwKayN4nl5z4HvvvHYrFQqCOd9MYH1DK5LyUf3aX1EqJu\nmGNTYb6OGlEGN6NAcaL+9Rgc1xKdAYIwWNNzDEQYcyRE68T8d3+0C52P7sKclByL\nptBDPPTUpWA28WrgWWAbBtcKh2RAQYdEsiIr+/fvPWse1oA5n2SCVbiEUyeJUzwq\nw077prDIkree/MO8Bi1CIcLMNPopu9SQx0G1Xu6Kl0krUMMfhlBH2x+ifiWXWU24\n5mkBW3zFo8WiFgZDsYhZrBkiTwt767QHPQm0VwIDAQABAoIBAB0k2asAu2XpZLKv\nrh0N79PjnK4ag81uXVxCbUVrUY2xmcZmFX1JMuUzsjbKMWyfiRtbOi3oecEONWr4\n/u6RFiiWFKfFmgujfoSdGAvQQMPWdYVYZwrWtvAXNqfmA91L79zZ7bn+kuyTxTD4\n8ghGHfwJxJ3iLDZ6AN4Nd/KY7LVxfqbI+m/1wJ02JzxTvs1fblHWSCGWolwevFxW\n5yroHursM6w6E5h24gVURAMURmswfq8RYdVvmPoD9T4Xx1xaXKZNgrTtVRBWjiy3\nDht/xEWhTdvxo4xJ7YvlLr0VL/1Tdu4SMfuq3WxZy/PEfHPsiaXvJPxIORmVJsHK\nUik7atECgYEA9P7q1QufcHXdwHnLEoxKnnCpVPZQ0A4/KJ9rGFzVHRfBri0miUry\nFp2ZUZL32NGwK0hCqIeEYRufrnx8PfxA9ewHWNFtf+x5Oa9MLAFt9xmRr7+pLp8x\nqfeWWd6tFAX6T3QS/iOKzAshlTqtalW9irj5XevRck7lMKtDZG16sbkCgYEAySRR\nhy2YKjUgTcUlnvg3cVcmXqjzUFLqNBSdK60INce1QQs8FU2jn+JNHvmzNN0TusN2\nfzYEqT4C57BUF7MgHPRzGOd6vAzlvDNOCap5LmOg/4zBr9hBqbIxDQRjJt4cowaY\nPMFz8Vdtrh8JQ9us/Dqc5FJqp4Rr8ju5oGNy3o8CgYBbXCBIGBB5yIpL918B6Kz+\nznZmx3+1RkrJJEG0kRGryqsf/5hKRFdolZaR8+NWyEMQsN6ip/52k+2FDMjr+IBk\n9IJ83YQe2xkNqNAX7OSL684HIsq9JwJHJpu7oa0bNWt1a4yVlr1wf4ojcwEuEREg\nhQAAxSqSnNccwhDch3LkiQKBgGanQXCS5XDNEkJ+ljeuiGUwzCVNZngdCOgxiREs\nSt9fn/KlMDHTIOnNTfy8BSi6l4IelZBQ2kohmsvx4skBoycD3uXb5XipwGmvaWln\ndlclg5pIlOUQolpf1cbF8XB5tPXCvNltBaYrL4/IySq3p25G36FrKoF6BLlon9Dq\nUEqjAoGBAJDJHaFQ03cpdJxpS9z2h+qAZMAvzvEEmQQL3+oiuuUc23r8V+8DWBJp\nO/ZqSxw456pFB7Iy/7g18oHR4vyWqb17W8DRgAUANcdMaoVduELCs0DNx5kJkBk/kevt21rpu9Y0mWWJqHJbbkqvi4fWaNg8iwVYk7xOTdDLGFtqrrUt\n-----END RSA PRIVATE KEY-----\n"
            },
            "proxy" : {}
        },
        "async" : {
            "delay" : "10000"
        },
        "router" : {
            "base" : "./"
        }
    },

⚠️：其中那些 \n 是你从那刚刚那两个文件中复制过来之后要把他们放在一行，把多行编辑成为一行才行

最后项目重新运行就可以看到运行项目是https的了

参考博主的原文链接：

vue项目，uniapp项目本地调试开启https，加载本地证书_uniapp 加证书-CSDN博客