利用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模块，修改页面加载函数的地址，如下：

 

 

三、讲讲感受

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

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

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

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

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