背景

想要做一个点击按钮直接复制图片的功能,需要用到navigator.clipboard，然而它只能在 https 模式下使用(localhost 没限制,可其它机器没法访问)

webpack 配置

基于 webpack 的项目想要支持 https，只需如下配置

const fs = require("fs");
const path = require("path");

  devServer: {
    https: true,
    key: fs.readFileSync(path.resolve(__dirname, "./https/key.pem")),
    cert: fs.readFileSync(path.resolve(__dirname, "./https/cert.pem")),
  },

mkcert

mkcert 可以生成key.pem和cert.pem,官网地址: github.com/FiloSottile…

Windows 环境下我选择 Chocolatey,官网地址: chocolatey.org/

"以管理员身份运行" powershell.exe

Get-ExecutionPolicy

运行 Get-ExecutionPolicy , 如果返回 Restricted 则继续执行

Set-ExecutionPolicy AllSigned 或者 Set-ExecutionPolicy Bypass -Scope Process

安装 chocolatey

运行

Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('chocolatey.org/install.ps1'))

下载 mkcert

运行 choco install mkcert

生成 https 相关文件

本地安装 CA

运行 mkcert -install

生成 key.pem、cert.pem

注意请在需要生成文件的地方执行下面的命令

mkcert -key-file key.pem -cert-file cert.pem example.com *.example.com

结果

成功在 https 上启动了

navigator.clipboard 也能用了

存在的问题

网站依然会标记为不安全,在 PC 端打开会是这样的效果，好在只要处理一次就好

通过微信扫码没有效果

总结

不排除上述流程有疏忽或不合理的地方，待后续研究

本地项目使用https启动

背景