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

一、背景

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

 

二、讲重点

具体的流程，参考：https://blog.csdn.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模块，修改页面加载函数的地址，如下：