preface

Summarize the problems encountered in the past projects

Vite

When yarn create vite is used to install the yarn create vite command, a message is displayed indicating that the file name, directory name, or volume label method is incorrect

If the create-vite file does not exist in the specified directory as prompted, you can view the Command directory and installation directory. If the two directories are in different positions, modify the directory

yarn global bin // Command directory
yarn global dir // Installation directory
yarn config set global-folder "D:\node\yarn\global"
yarn config set cache-folder "D:\node\yarn\cache"
Copy the code

Electron

If the installation is slow or fails, use an image to resolve the problem

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

Set the taskbar icon and system icon

The development environment uses the electron icon by default. After packaging, the icon is set by yourself. It was pitted for an hour

fs.existsSync is not a function at getElectronPath

The page cannot directly import or require the electron module, which needs to be obtained from the window environment: window.require(‘electron’)

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

Tsconfig. json target is set to esnext

Element ui

El-tree Displays the serial number

  • Description: The component is equipped with the state switching function through SOLt. If the serial number of the component is used, it will be found that the serial number will increase continuously during the state switching
  • Procedure: Component serial numbers are not trusted and need to be defined separately
<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>* / getIndex(node) {let num = listData[0].inx++; node.numInx = num; return num; }, /** * components have click events, and lists add up. If listDAta has 10 items with the serial number 1, click switch and the serial number changes to 11, * / changeSwitch(data) {listData[0]. Inx = data.numinx; }}</script>
Copy the code

Git

Gitlab and Github are configured with different SSH keys

Step 1: Generate an SSH Key normally

Step 2: Passphrase can be set according to your needs, all the way by defaultStep 3: By default, only id_rsa is read. To enable SSH to recognize the new private key, add it to SSH agent and create config in the.ssh directory

Step 4: Configure as follows

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  
Copy the code

Step 5: Verify

ssh -T [email protected]
ssh -T git@gitlab
Copy the code

You’ve successfully authenticated, but Github does not provide shell access

It may be a configuration problem. Use SSH instead of HTTPS. Off the clock. Anyway, it’s not like it can’t work

Git status indicates nothing to commit, working tree clean

Make the local branch the trace branch of the remoteBranch: git branch -u origin/remoteBranch

Packaging “ERR_ELECTRON_BUILDER_CANNOT_EXECUTE”

If there is a network problem, you can place the electron packet into a Cache file and unpack the corresponding version into C:\Users\Admin\AppData\Local\electron- Builder \Cache

Error: __dirname is not defined

By default, node’s native plug-ins are not allowed to be called. BrowserWindow webPreferences sets nodeIntegration to true

Set the zoom ratio on the desktop

1, using commandLine to fix the zoom ratio to 1, if the page is set to the 1920 resolution px, 4K screen will have a problem, must be set before the page renders, Otherwise not effective app.com mandLine. AppendSwitch (‘ high dpi – support ‘, ‘true’) app.com mandLine. AppendSwitch (‘ force – the device – scale – factor ‘, ‘1’) github.com/electron/el… Ourcodeworld.com/articles/re…

Window.require (‘electron’).webframe.setzoomfactor (parseFloat(width / 1920))

3. After page rendering, the screen resolution is obtained and the zoom ratio is reset. Because the main process cannot monitor whether the page is successfully rendered, the rendering process triggers the event after successful rendering, and the main process sends the screen resolution to the rendering process in response, and then setZoomFactor is used to set the zoom ratio

The picture

Returns the correct address and the image shows the broken image

  • Description: the image address returned by the backend can be opened in the browser, but cannot be displayed after assigning to IMG
  • Process: in the console found img SRC abnormal address, pictures will be joining together the current routing path address: http://172.0.0.1:8086/xxx/172.0.0.1/public/picture/82.jpeg
  • Reason: the back-end return address no agreement: 172.0.0.1 / public/picture / 82. The jpeg, the browser will open automatically added. Vue. Config. js assetsPublicPath is ‘./’, which splices non-protocol addresses as relative paths
  • Solution: picture address plus protocol

Img automatically changes HTTP to HTTPS

  • Description: back end to HTTP: XXXX picture link, local can be used normally; All HTTP images automatically become HTTPS :\ XXX links after being packaged to the upload server, making all images inaccessible, and only Chrome
  • Reason: Not found, browser? Nginx configuration? Busy as a dog, I don’t care
  • Solution: Because it is a relatively small image, directly to base64 complete

The database

SQL determines whether the columns of two tables are equal

  • Description: Failed to obtain the correct result when checking the equality of two tables
  • Cause: The field types of the two tables are inconsistent and the values are never the same

Third-party plug-ins

Vue-video-player memory leaks. Procedure

  • Description: a page has 12 channels of video, and can be page-switched, after a period of time, the browser crashed
  • Process: After a preliminary investigation of the code, a large number of video nodes were not recovered using the browser console Performance and Memory, and the cause was found on Github issue: Memory leak
  • Reason: There is a problem with video.js, the new version is fixed, but the plugin uses the old version
  • Solution: Manual upgrade plug-in is troublesome, change to new version of video.js

Vue-cropper captured the image and uploaded it

  • Description: The size of the large picture is 1000 * 1000, which cannot be displayed completely after uploading. The part under the picture shows transparent blank
  • Process: search for documents and ask developers, but can not be solved. Finally, compare the printed parameters one by one
  • Reason: When the dataURL is converted to file, the image size changes, and the generated image is larger than the original image. The plugin uploads the original image size.
  • Causes the excess part to be missing
  • Solution: reassign the block size
this.$refs.uploader.uploader.fileList[0].chunks[0].endByte = modelView.size; 
Copy the code

conclusion

Write to write to want to touch fish, a lot of remember not quite clear, by memory to write some, hope not to make mistakes.