前言
本文已参与[新人创新礼]活动，一起开启掘金创作之路。 上一章咱们讲过了基础的前端项目打包electron桌面端应用的方法，本章开拓一下Vue项目打包成electron桌面端应用。本文介绍两种打包方式，可根据自己的喜欢或者实际项目需求选择，让我们进入正文吧!
正文
方式一：
1、参考juejin.cn/post/707749…，创建electron环境，环境创建后目录结构为下：
>项目A
>--main.js
>--preload.js
>--index.html
>--package.json
2、将现有的Vue项目打包或新建一个新的Vue项目后打包，这里就不给大家讲解新建Vue项目的过程了。
注意：
1、打包后的文件如果出现白屏的话，记得修改一下vue.config.js文件的
publicPath: '/'，修改为publicPath: './',
2、如果使用的是Vue-element-admin模板的话，记得要把token的存储方式
由cookie改为localsotre或者sessionstore
3、将vue项目打包后的dist文件拖动到项目A(即electron环境)下，并修改main.js文件配置(平头哥配置的vue打包路径为dist，这里根据各自情况来。)
win.loadFile('index.html')
要修改为
win.loadFile('./dist/index.html')
4、删除项目A(即electron环境)下的index.html文件，这个文件已经没有用了。删除后的目录结构为下：
>项目A
>--dist
>--static
>--favicon.icon
>--index.html
>--main.js
>--preload.js
>--package.json
5、运行命令 npm start ，可快速打开你的web应用，查看应用配置的内容是否正确。
6、参考juejin.cn/post/707749…执行命令 npm run build或 npm run packager，运行成功后就会在项目根目录中看到build文件，运行exe文件就可以看到打包后的项目了。
方式二：
1、创建Vue项目，这里就不给大家讲解创建项目的过程了。直接进入主题。
2、打开Vue项目，安装electron依赖，使用以下命令。
vue add electron-builder
3、安装完成后，项目src目录下会生成background.js文件，这是electron的配置文件。同时在package.json中增加了electron的启动命令和打包命令。
4、运行以下命令，可以查看效果。
npm run electron:serve
