1. 下载electron文件:
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
2. 更改vue配置
将下载的electron文件中的main.js复制到vue项目根目录下并改名为electron.js
更改路径:在项目config/index.js 中 build: - assetsPublicPath 修改为相对路径 ./
3. 添加electron依赖
npm install electron --save-dev
4. 添加打包依赖
npm install electron-packager --save-dev
5. 修改package.json
package.json中的“scripts”添加"electron_dev"与"electron_build"
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js",
"electron_dev": "npm run build && electron build/electron.js",
"electron_build": "electron-packager ./dist/ --arch=x64 --overwrite"
},
6. 打包
生成dist文件夹
npm run electron_dev
复制一份package.json到dist中
修改dist/package.json
main入口为:(与name同级)
"main": "electron.js"
复制一份electron.js到dist中,并修改修改electron.js
mainWindow.loadFile('index.html')
7. 生成exe原生文件
npm run electron_build
8. exe安装包打包工具
1.下载inno setup软件,根据提示进行安装
选择中文,直接下一步下一步就可以,这里就不放打包安装步骤了
2.运行软件,选择红框中的选项,点击下一步
3.点击下一步下一步进入应用设置页面:
4. 点击下一步下一步进入封装页面:选择要封装的exe文件,点击add folder选择文件夹,文件夹选择包括整个exe的文件夹
5. 点击下一步下一步:进入封装文件存放
点击下一步下一步点击确定,自动输出exe安装包;
最后:这种只是基础的封装,只能下一步下一步的安装,各样式安装程序这个封装软件是做不来的。
方法步骤来源网络,如有冲突请留言更改。