前言

过往一些项目遇到的问题，总结一下

Vite

安装官网命令，使用 yarn create vite 提示文件名、目录名或卷标语法不正确

根据 Command 的提示，去到指定目录下，发现没有 create-vite 文件查看命令目录和安装目录，两者位置不一致，则进行修改

yarn global bin // 命令目录
yarn global dir // 安装目录
yarn config set global-folder "D:\node\yarn\global"
yarn config set cache-folder "D:\node\yarn\cache"

Electron

安装慢或失败，通过镜像解决

npm config set registry https://registry.npm.taobao.org/
npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

设置任务栏图标和系统图标

开发环境默认用 electron 图标，打包后才是自己设置的图标，被坑了一个小时

fs.existsSync is not a function at getElectronPath

页面无法直接 import、require electron 模块，需要从window环境获取：window.require('electron')

This dependency was not found: xxx\src\background.js in multi ./src/background.js

background.ts 报错，tsconfig.json target 设置不对，可改为 esnext

Element ui

el-tree 显示序号

描述：组件通过 solt 加上状态切换功能，如果使用组件序号，在切换状态的时候，会发现序号会不断递增
过程：组件序号不可信，需要另外定义序号

<el-tree :data="listData">
    <div slot-scope="{ node, data }">
        <ul>
            <li>{{ getIndex(node) }}</li>
            <li>
                <el-switch v-model="enable" @change="changeSwitch(data)"></el-switch>
            </li>
        </ul>
    </div>
</el-tree>

<script>
    methods: {
        /**
         * 给 node 新增属性，在点击 switch 用到
         * /
        getIndex(node) {
            let num = listData[0].inx++;
            node.numInx = num;
            return num;
        },
        /**
         * 组件有点击事件，列表也会累加。假如 listDAta 有 10 条数据，序号为 1，点击 switch 后，序号变成 11，这时候就可以通过 data 的属性 numInx 来重置序号
         * /
        changeSwitch(data) {
            listData[0].inx = data.numInx;
        }
    }
</script>

Git

gitlab 与 github 配置不同的 ssh key

第一步：正常生成 SSH Key

第二步：passphrase可以根据自己的需要设置，一路默认 1628839447(1).png 第三步：默认只读取id_rsa，为了让SSH识别新的私钥，需将其添加到SSH agent中，在 .ssh 目录创建 config

第四步：配置如下

Host gitlab  
    HostName git.xxx.com 
    PreferredAuthentications publickey  
    IdentityFile ~/.ssh/id_rsa  

Host github.com  
    HostName github.com  
    PreferredAuthentications publickey  
    IdentityFile ~/.ssh/id_rsa_xxx

第五步：验证

ssh -T git@github.com
ssh -T git@gitlab

拉取 github 项目，You've successfully authenticated, but GitHub does not provide shell access

估计是配置问题，不用 https，改用 ssh 即可。下班啰，不管了，又不是不能用

git commit 后 git status 提示 nothing to commit, working tree clean

把本地分支设成远程分支的跟踪分支：git branch -u origin/remoteBranch

打包“ERR_ELECTRON_BUILDER_CANNOT_EXECUTE”

网络问题，可以把electron包下好放到缓存文件，把对应的版本解压放到 C:\Users\Admin\AppData\Local\electron-builder\Cache 目录下

渲染进程中调用ipc与主进程通讯报错：__dirname is not defined

默认是不允许调用node的原生插件，BrowserWindow webPreferences 设置 nodeIntegration: true

设置桌面端的缩放比

1、通过 commandLine 固定缩放比为 1，假如页面是根据 1920 分辨率去设置 px，4k 屏幕会出问题，一定在页面渲染之前设置，否则不生效 app.commandLine.appendSwitch('high-dpi-support', 'true') app.commandLine.appendSwitch('force-device-scale-factor', '1') github.com/electron/el… ourcodeworld.com/articles/re…

2、页面是写死的，可以除以一个固定宽度 window.require('electron').webFrame.setZoomFactor(parseFloat(width / 1920))

3、页面渲染后，获取屏幕分辨率，重设缩放比因为主进程无法监听页面是否渲染成功，所以渲染成功后，渲染进程进行事件触发，主进程响应则把屏幕分辨率发送到渲染进程，再用 setZoomFactor 进行设置缩放比

图片

返回正确的地址，图片显示破图

描述：后端返回的图片地址在浏览器可以打开，但赋值给 img 后，无法显示
过程：在控制台中发现 img src 的地址异常，图片路径地址会拼接当前路由：http://172.0.0.1:8086/xxx/172.0.0.1/public/picture/82.jpeg
原因：后端返回的地址没有协议：172.0.0.1/public/picture/82.jpeg，浏览器打开会自动补充。vue.config.js assetsPublicPath 为 './'，把没有协议的地址当成相对路径进行拼接
解决：图片地址加上协议即可

img 自动把 http 改为 https

描述：后端给 http:\xxxx 的图片链接，在本地可以正常使用；打包上传服务器后所有的 http 图片都自动变成 https:\xxx 的链接，导致图片全部不能访问，而且只是 chrome 会这样
原因：没找到，浏览器？Nginx 配置？忙得狗一样，不管了
解决：因为是比较小的图片，直接转 base64 完事

数据库

SQL 判断两个表的字段是否相等

描述：对两个表的字段做相等判断，无法得到正确结果
原因：两个表的字段类型不一致，值永远不等

第三方插件

vue-video-player 出现内存泄漏

描述：一个页面有十二路视频，并且可分页切换，一段时间后，浏览器崩溃
过程：在初步对代码进行排查后，使用浏览器控制台 Performance、Memory 发现大量的 video 节点没有回收，在 github issue 找到原因：内存泄漏
原因：video.js 本身就存在这种问题，新版本的解决了，不过插件使用的是旧版本
解决：手动升级插件比较麻烦，改为新版 video.js

vue-cropper 截取图片上传

描述：对大图截取 1000 * 1000 的大小，上传后无法显示完全，图片下部分显示透明空白
过程：查找文档、询问开发者，均无法解决，最后对打印出的参数进行一一对比后解决
原因：dataURL 转为 file 的时候，图片大小发生变化，生成的图片比原图还大，插件上传的是原图 size，
导致超出部分缺少
解决：重新把块的 size 赋值

this.$refs.uploader.uploader.fileList[0].chunks[0].endByte = modelView.size;

总结

写着写着就想摸鱼了，很多都记得不太清楚了，凭记忆写了一些，希望不会出错吧。

项目中遇到奇形怪状的问题

前言