记录一次利用electron将vue项目打包为桌面应用程序的步骤,测试项目为毕业设计项目,基于vue-cli3进行开发。
ps:还可以通过PWA和nw.js进行操作,暂时未深入研究
打包步骤
打包自己的项目
通过npm run build
命令打包我们自己的项目,生成一个dist文件夹
注意:运行此命令之前我们需要修改公共路径为相对路径,防止 npm run build 后出现白屏情况
方法:新建一个vue.config.js文件,修改publicPath路径。如果是vue-cli2项目,则修改config文件夹下面的index.js文件的assetsPublicPath
module.exports = {
publicPath: './'
}
克隆electron的官方示例到本地
git clone https://github.com/electron/electron-quick-start
修改克隆示例项目的内容
- 删除克隆项目根目录下的 index.html 文件,然后将打包完成的dist文件夹拷贝到克隆的electron项目中,如下图:
- 修改main.js文件中的内容(打包的文件路径)
// main.js 原始内容
mainWindow.loadFile('index.html')
// 修改后的内容
mainWindow.loadFile('./dist/index.html')
- 安装依赖并预览
// 安装依赖(如果下载太慢,可以将镜像源设置为淘宝的镜像源)
// npm config set registry https://registry.npm.taobao.org/
// npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/
npm install
// 正常情况执行此命令后便可以预览打包后的效果,若有问题,检查配置是否有误
npm run start
- 在当前克隆项目下载打包依赖electron-packager
npm install electron-packager --save-dev
- 配置package.json文件
"scripts": {
"start": "electron .",
// 添加packager命令,其中icon为打包后的exe文件图标,不配置(直接删除)则为默认图标
"packager": "electron-packager ./ community --platform=win32 --arch=x64 --icon=./dist/bitbug_favicon.ico --overwrite"
},
ps:记得删除JSON文件中的注释
- 运行命令打包
npm run packager
执行命令后当前项目下会生成一个xxx-win32-x64的文件,.exe启动文件就在里面
封装安装包
若要将启动文件封装成安装包,可以进行百度,有很多方法可以办到,此处推荐 Inno Setup 作为封装工具。
大佬详细教程
packager打包命令解释
"packager": "electron-packager ./ community --platform=win32 --arch=x64 --icon=./dist/bitbug_favicon.ico --overwrite"
-
“win32”: 自己任意指定的名字;
-
“electron-packager”: 指定使用electron-packager进行打包;
-
“./”: 一般是指package.json的位置;
-
“community”:app name,可任意更改
-
“–platform”: 系统取值为: “win32”,“linux”,“mas”,"darwin"还有其他的一些;
-
“–arch”: 系统取值为: “ia32”,“x64”,“armv7l”,"arm64"还有其他的一些;
-
“–out”: 打包完的可执行文件放在那里;
-
“–overwrite”: 是否覆盖原有的生成文件;
-
“–asar”: 生成.asar文件,不加则不生成;
-
“–icon”: 设置打包的时候的图标;
-
“–ignore”: 要排除掉的不打包文件;
-
“–extra-resource”: 可以将第三方资源,在打包的时候,复制到打包后resource目录下
-
“appname”: 打包完毕的可执行文件名
博文参考:
electron官方文档
https://zhuanlan.zhihu.com/p/449443615
https://www.jianshu.com/p/6358fb6e84f5
https://www.cnblogs.com/xufeikko/p/10559444.html