本地服务生成HTTPS证书

• 1.webpack 最简单的套餐 webpack-mkcert

  • npm i webpack-mkcert

  • vue-cli 为例（webpack5.+）

  const WebpackMkcert = require('webpack-mkcert');
  
  module.exports = defineConfig(async () => {
  
      const SSL = await WebpackMkcert.default({
      	source: 'coding',
      	hosts: ['localhost', '127.0.0.1', 'abc.d.com'],
  	});
      
     return {
      devServer: {
        allowedHosts: 'all',
        open: false,
        host: '0.0.0.0',
        port:443,
        server: {
        type: 'https',
        options: {
         	 		host: 'localhost',
         	 		...SSL,
       	 	},
      	},
      },
    };
  });
  

• 2.通过mkcert 安装证书

  • 安装包：Releases · FiloSottile/mkcert (github.com)

• 安装，根据系统选择（这里使用mkcert-v1.4.4-windows-amd64.exe）

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

• 安装证书 (在当前路径下，生成localhost的证书)

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

• 证书名字：

  • localhost-key.pem
  • localhost.pem

3.使用证书（nginx、tomcat、node server 等）

• 以vue-cli (webpack5+)做演示

const fs = require('fs')

module.exports = defineConfig(() => {    
   return {
    devServer: {
      allowedHosts: 'all',
      open: false,
      host: '0.0.0.0',
      client: {
      webSocketURL: 'wss://localhost/wss',
      },
      port:443,
      server: {
      type: 'https',
      options: {
        key: fs.readFileSync('D:/soft/mkcert/localhost-key.pem'),
        cert: fs.readFileSync('D:/soft/mkcert/localhost.pem')
      }
    },
  };
});