前言

最近公司的项目项目因为一些原因，必须使用https进行本地开发，所以就参照网上给的教程配置，又是openssl,又是mkcert的一通操作下来，结果都不能完美的在本地开启https（浏览器的小锁是红色的）这我当然忍不了，所以fork了vite-plugin-mkcert这个库，改了改，得到了webpack-mkcert解决了这个小问题

原理

这个库会按照传入的host通过mkcert自动申请证书，并将cert和key的配置返回出来，直接使用就能开启https

下面是仓库地址，需要更详细的使用方式可以去看看。

• npm: www.npmjs.com/package/web…
• github: github.com/WXperia/web…

webpack-mkcert

这个库解决了需要自己安装mkcert的麻烦步骤，第一次安装时，window会弹出管理员权限授权，macos会要求输入密码或touchid,记得通过就好。

安装

yarn add webpack-mkcert

安装完成后，根据webpack4 ｜ webpack5的版本，两种配置方式不同

（webpack4）配置一:

const webpackMkcert = require('webpack-mkcert')

module.exports = defineConfig(async ()=>{
  
  const https = await webpackMkcert.default({
    source: 'coding',
    hosts: ['localhost', '127.0.0.1']
  })
  return {
    transpileDependencies: true,
    devServer: {
      https: {
        hosts: 'localhost',
        ...https
      }
    }
})

(webpack5) 配置二：

const { defineConfig } = require('@vue/cli-service')
const webpackPlugin = require('webpack-mkcert')

module.exports = defineConfig(async () => {
  const https = await webpackPlugin.default({
    source: 'coding',
    hosts: ['localhost', '127.0.0.1']
  })

  return {
    transpileDependencies: true,
    devServer: {
      server: {
        type: 'https',
        options: {
          host: 'localhost',
          ...https,
        },
      }
    },
  }
})

最终效果