问题记录

1. electron-vue打包后样式变大以及不同分辨率屏幕适配问题

原文链接 (opens new window)
打包之后发现界面的样式和本地界面样式不一样，整体偏大一些，装到另一台电脑，发现差别更大了。怀疑是屏幕分辨率适配的问题，试了一下，果然如此。
解决方案：先读取电脑屏幕的系统分辨率，然后做一下缩放适配，这样在不同的电脑上显示效果都一样了。

// 主进程 src/main/index.js
import { screen } from 'electron'

function onAppReady() {
    ipcMain.on('get-window-config-size', (event) => {
        const scaleFactor = screen.getPrimaryDisplay().scaleFactor
        event.reply('get-window-config-size', scaleFactor)
    })
}

// 子进程 src/renderer/App.vue
import { webFrame } from 'electron'

created () {
    if (process.env.NODE_ENV !== 'development') {
        ipcRenderer.send('get-window-config-size')
        ipcRenderer.once('get-window-config-size', (event, scaleFactor) => {
            const devInnerHeight = 1080.0 // InnerHeight
            const devDevicePixelRatio = 1.0 // devicepixelratio
            const devScaleFactor = 1.6 // 调整这个值
            const zoomFactor = (window.innerHeight / devInnerHeight) * (window.devicePixelRatio / devDevicePixelRatio) * (devScaleFactor / scaleFactor)
            webFrame.setZoomFactor(zoomFactor)
        })
    }
}