webpack或vite开启https访问

问题

项目中开发过程中经常会遇到，调用浏览器的一些方法需要https的情况，例如最近开发的一个项目由于后端访问限制，本地开发时必须使用域名访问的形式开发，不可以使用localhost，导致本地调用浏览器的复制功能时一致报错，后来经查证谷歌浏览器限制使用该方法时必须是https或者localhost访问时才可以使用

const data = [
          new ClipboardItem({
            [blob.type]: blob,
          }),
        ];
// 例如使用上述方法时，会报错 TypeError: ClipboardItem is not a constructor ，原因就是上述所说

问题解决

vite开发下

使用vite-plugin-mkcert 插件，可以使用 mkcert 为 vite https 开发服务提供证书支持

npm i vite-plugin-mkcert -D

vite-config.ts

import VitePluginCertificate from 'vite-plugin-mkcert';
...
plugins: [
     VitePluginCertificate({
        source: 'coding',
      }),
]
...
​

webpack 开发下

npm install -g mkcert
mkcert create-ca

直接双击刚刚生成的ca.crt文件，弹出的界面中选择安装证书,下一步弹窗中，选择“当前用户”或“本地计算机”均可，主要是下一步，选择“将所有的证书都放入下列存储”，并且选择为“受信任的根证书颁发机构”

vue.config.ts

const fs = require("fs");
​
...
devServer: {
    port: 3000,
    host: "127.0.0.1", //在hosts里面配置自己的域名例如：127.0.0.1 merlin.cn
    allowedHosts: [".merlin.cn"],
    https: {
      key: fs.readFileSync("./cert.key"),
      cert: fs.readFileSync("./cert.crt"),
    },
    proxy: {
      "/api": {
        target: "http://merlin.cn/",
        changeOrigin: true,
        pathRewrite: {
          "^/api": "",
        },
      },
    },
  },
...

这样改完后，我浏览器访问时依然显示不安全，但可以使用https访问了，之前报错的问题也解决了

如果觉得文章对你有帮助，欢迎一键三连