一、背景 最近公司需要将已经做好的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加载进来，要么就是不能加载。后面那一种刚才一直在弄，没进展，那就试试前面一种。如果是没加载进来，那么原因无非就是路径不对。试了下路径，哎，问题就解决了，也没有报上面的错误了。
【vue|利用vue + electron将web项目打包成桌面应用】所以说，遇到问题，还是得自己先分析分析，列出可能的原因，然后对症下药，那才有效。像刚开始那样，被问题牵着走，那就不对了，可能真正卡住的地方根本就不是这个问题造成的。总而言之一句话，多动动脑，多出去走走。
推荐阅读
- vue|Vue+Electron开发跨平台桌面应用（实战）
- webpack|vue多页面应用如何针对其中的某个页面进行单独打包
- vue|Vue快速入门（狂神版）
- 笔记|springboot+vue前后端分离整合shiro+jwt
- 笔记|Vue使用音频播放器插件 vue-aplayer
- #|vue使用 APlayer+Meting实现音乐播放，支持多平台音乐（网易云、腾讯、虾米、酷狗、百度）
- vue+springboot|基于vue+springboot的校园疫情健康打卡和离校审批系统的设计 （百度地图API对接）
- vue|使用vue音频播放器（vue-aplayer）详解
- ts|typescript 中函数参数为对象如何效验