vue本地https打开

通过mkcert创建本地证书

npm install -g mkcert

生成证书

mkcert create-ca

生成之后会看到一个ca.crt和ca.key文件

利用刚刚生成的ca证书，再生成cert证书，mkcert create-cert，会在刚刚的路径下生成cert.crt和cert.key文件

mkcert create-cert --domains 127.0.0.1,localhost,域名

双击刚刚生成的ca.crt安装到电脑受信任的根证书中

const path = require('path')
const fs = require('fs')

module.exports = {
  devServer: {
    disableHostCheck: true,
    https: {
      cert: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.crt')),
      key: fs.readFileSync(path.join(__dirname, 'src/ssl/cert.key'))
    }
  }
}

或vue3 vite：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

const fs = require('fs')
const path = require('path')

// https://vitejs.dev/config/
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'))
    }
  }
})

注：记得绑host。本地打开的端口用443(https默认端口)