Electron踩坑日记

Electron + vue项目打包后,应用打开出现空白背景

在实际开发过程中,我遇到了在serve模式下能够正常运行,但是build后的产物给到测试,打开出现全透明(因为我设置了electron的透明属性,如果没有设置就是纯白色)没有内容的情况.
经过排查我发现,产生问题的原因是在serve模式下

win.loadURL("http://localhost:8080/");

使用的是本地启动的服务给到electron渲染,而当build后,发布包给其他用户会由于8080端口访问/安全性等问题无法获取到页面内容.

所以,应当在打包之前将其改动为

win.loadURL(`file://${path.join(__dirname, '../dist/index.html')}`);

这样渲染进程就会去拿到vue项目打包后的dist目录下的文件,也有可能地址存在偏差,但是我想默认情况下应该都是这个目录下.

接下来让我们来看一下为什么会出现白屏呢?

这就不得不提到vue项目打包金典的坑了,项目目录出错,这是很多新手都会遇到的问题,明明serve模式下正常显示,但是打包出的dist文件夹内的网页打开没有内容.

解决方案:

只需要修改根目录下的vue.config.js文件即可

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: './', // 确保使用相对路径
})

经过以上操作,就可以打包出正常的他人可以打开的项目了