electron打包vue应用为exe

很多的项目开发都需要最后为一个exe执行文件，而不是网页，那vue如何转成exe文件呢？

效果如下：

exe界面

浏览器界面：

实现方法：

一.在git下载electron模版，并删除掉其中的index.html

git clone https://github.com/electron/electron-quick-start

二.利用npm run build打包文件

打包得到该项目的dist文件

三.适配修改并打包

下载依赖

npm install electron-packager

main.js中修改文件路径为你打包文件的index

  mainWindow.loadFile('./dist/index.html')

package.json中新增打包命令

    "packager": "electron-packager ./ --paltform=win64 --arch=x64 --icon=./dist/favicon.ico --overwrite"

执行npm run packager得到打包文件

这样就会得到一个打包文件夹

可能出现的问题：

在最初尝试的时候还是遇到了一些问题，有点记不清了，不过查阅一些资料还都是可以解决的。

第一个问题：路由模式需要从hash改成history，因为electron默认的路由为history。

第二个问题：打包后index访问css和js文件路径有问题，需要在vite.config.js文件里配置根目录路径

  base: './', // 设置基础路径为根目录

根据不同的项目可能还会遇到很多的问题，对于electron我学习的也只是个使用方法和基本，以后有机会再多多看看~