vue+electron打包成桌面应用以及遇到的一些问题（白屏）

vue+electron打包成桌面应用

1. 先在我们的项目里下载electron，我们可以选择最新版本13
   

2. 然后vue中添加 electron-builder
   

3. 下载完成之后我们的src文件下会有一个background.js的文件，这里面是对于运行程序的一些配置信息
   

4. 接下来我们可以通过npm run electron:serve来启动服务
   
   服务启动完毕后我们的项目中会多出dist_electron的文件夹，文件夹中有两个文件，如下图，同时我们的程序会自动启动，只需要点击任务栏来查看即可
   
   

5. 最后通过npm run electron:build来打包成桌面应用程序

上面显示说明打包成功了！dist_electron文件夹中显示下图这些文件，其中有个exe的文件，双击它可以把我们打好包的项目生成桌面应用程序，

下图中win-unpacked文件夹里也有个exe的文件，这个文件可以直接打开我们打包好的应用程序，不生成桌面应用程序。

打包时遇到的一些问题：

1. 在background.js，我用到的配置项很少：通过width设置窗口的宽度，height设置高度，想隐藏菜单栏的话frame设置成false。
   
2. 启动electron服务的时候窗口里有内容，但是打包后窗口白屏，原因是因为loadURL的地址我写成了后台地址，其实这的地址写的应该是启好了的服务地址，比如我前端起的端口默认是8080，那么地址应该写成 “http://localhost:8080/#/” ，或者地址写成用nginx启好了的地址，如上图8090的端口是我用nginx起好的地址；打包窗口白屏还有一种原因就是路由用的是histroy，应该改成“ mode:‘hash’ ”
3. electron-builder 在打包时下载nsis winCodeSign超时问题，如下图，我的解决方案是设置.npmrc 自动下载。
   
   根目录下创建.npmrc文件.然后写上如下图内容，再重新npm run electron:build，就不会有各种超时的问题了。(还有一种解决方案是手动下载，中间可能会遇到版本问题，因为我没有试过，所以这里就不叙述具体步骤了)