Bootstrap

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我学习的也只是个使用方法和基本,以后有机会再多多看看~

;