利用vue + electron将web项目打包成桌面应用

时间:2024-04-13 14:07:55

一、背景

最近公司需要将已经做好的vue项目,打包成桌面应用程序。去网上找了些资料,用的是比较简单的一种。当然了,还有其他的方法,比如说基于electron-vue脚手架。但是当前首要的是出成果,所以就用第一种方法。

 

二、讲重点

具体的流程,参考:https://blog.****.net/m0_37604745/article/details/79303342(也有其他人写的,都是大同小异)

注意:在build文件夹的electron.js中加上  mianWindow.openDevTools()  用于打开调试窗口

我用的electron版本、下的demo都是最新的,和以前是有区别的:在main.js文件中页面加载函数是loadFile()函数,不是参考文档中的loadURL()函数。如果和我一样,就有可能碰到我遇到的问题,那就继续往下看;如果和参考文档一样,那就照那个来。

碰到的问题:

1、npm run electron_dev后,出现空白的情况。

解决的方法:

a、首先确认build的时候,打包的路径是否修改过(参考文档中有说明)

b、打开build文件夹中的electron.js,引入path模块,修改页面加载函数的地址,如下:

利用vue + electron将web项目打包成桌面应用

 

 

三、讲讲感受

这里是随笔,就写写解决这个问题的过程。

刚开始都是挺顺的,但是npm run electron_dev就是没有出现想要的效果。然后把自己的代码中loadFile()函数也改了,和参考文档一模一样,反而多报了个url is undefined的错。然后打开控制台进行查看,发现报了下面的错:

利用vue + electron将web项目打包成桌面应用

因为出于安全的原因,禁止访问本地文件,想想也是。

接下来就是解决问题,关键字一搜索,一大堆内容弹出来。查看了很多,也试了几种方法,要么没用,要么觉得牛刀杀鸡没必要。看得烦了,就出去逛了下,吸了下杭州刺骨的空气,瞬间就清醒了,回来后整理下思绪:既然demo能成,就说明基本的方向是对的;但是出现空白,我想要么是没把html加载进来,要么就是不能加载。后面那一种刚才一直在弄,没进展,那就试试前面一种。如果是没加载进来,那么原因无非就是路径不对。试了下路径,哎,问题就解决了,也没有报上面的错误了。

所以说,遇到问题,还是得自己先分析分析,列出可能的原因,然后对症下药,那才有效。像刚开始那样,被问题牵着走,那就不对了,可能真正卡住的地方根本就不是这个问题造成的。总而言之一句话,多动动脑,多出去走走。