常见错误问题总结

1. 解决Dockerfile中 Could not initialize class sun.awt.X11FontManager错误

Dockerfile中增加命令

RUN yum install dejavu-sans-fonts fontconfig -y

如果您使用的是基于Alpine Linux的发行版，可以使用apk命令来安装DejaVu Sans字体和fontconfig工具

RUN apk update
RUN apk add ttf-dejavu fontconfig

2. 解决错误error:0308010C:digital envelope routines::unsupported at new Hash

Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at D:\Vue\qx-ty-fore\guanli\node_modules\compression-webpack-plugin\dist\index.js:243:42 at CompressionPlugin.compress (D:\Vue\qx-ty-fore\guanli\node_modules\compression-webpack-plugin\dist\index.js:284:9) at D:\Vue\qx-ty-fore\guanli\node_modules\compression-webpack-plugin\dist\index.js:305:12 at _next1 (eval at create (D:\Vue\qx-ty-fore\guanli\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:14:17) at eval (eval at create (D:\Vue\qx-ty-fore\guanli\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:33:1) at D:\Vue\qx-ty-fore\guanli\node_modules\copy-webpack-plugin\dist\index.js:91:9

启动脚本package.json中加入如下即可

本地Windows配置
"scripts": { "dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --mode development" }

Linux配置

"scripts": { "dev": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --mode development" }
或者试下

"scripts": { "dev": "NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --mode development" }

3. JRebel+XRebel热部署插件激活支持IDEA2023.1

JRebel是一款JVM插件，它使得Java代码修改后不用重启系统，立即生效。IDEA上原生是不支持热部署的，一般更新了 Java 文件后要手动重启 Tomcat 服务器，修改才能生效；所以推荐使用 JRebel 插件进行热部署。

1. 在填入Team URL时，填入以下内容

http://127.0.0.1:8888/{GUID}

GUID可以使用在线GUID地址在线生成，然后替换{GUID}就行

2.下面邮箱地址可随便输入。

3.选择我同意

4.提交

如果报Unable to connect to license server.Check your network connnection and/or VPN settings.

需要在此处下载自己机器系统相对应的工具，如图：

下载好了后，进行安装打开（激活插件时，程序保持启动，激活成功后可关闭），如图：

再次执行上面的操作步骤即可激活。

4. Vue图片URL转File实践[已解决跨域问题]

async imgToFile(url) {
      const self = this
      const image = new Image()
      //let url = "https://shenjianblog.oss-cn-shanghai.aliyuncs.com/pic/20220612/sfxs.jpg"
      // 使用 fetch 获取图像作为 Blob 对象
      const response = await fetch(url.replace("https://shenjianblog.oss-cn-shanghai.aliyuncs.com", "/imgApi"));
      const blob = await response.blob();
      const imgSrc = URL.createObjectURL(blob)
      // 加载 Blob 对象的 URL
      image.src = imgSrc;
      image.onload = () => {
        const canvas = document.createElement('canvas')
        canvas.width = image.width
        canvas.height = image.height
        const context = canvas.getContext('2d')
        context.drawImage(image, 0, 0, image.width, image.height);
        canvas.toBlob(function (blob) {
          const selectedFile = new File([blob], 'image.png', {type: 'image/png'});
	  console.log(selectedFile)
        })
      };
    },

在Vue.config.js中配置代理即可

  // 配置代理
  devServer:{
    open: true,
    proxy:{
      "/imgApi": {
        target: 'https://shenjianblog.oss-cn-shanghai.aliyuncs.com',
        changeOrigin: true,
        pathRewrite:{
          '^/imgApi':''   //请求的时候使用这个api就可以
        }
      }
    }
  }