更新于：2019-11-07

VUE+ELECTRON打包桌面程序

• 下载electron资源
• 安装依赖
• 安装electron
• 安装打包工具

main.js

修改package.json

项目启动

白屏

打包

• 修改package.json
• 添加文件
• 运行

vue项目搭建可参考：https://blog.csdn.net/ted_sky/article/details/102895148

下载electron资源

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

注：npm install electron失败，提示删除重试，可能是node版本（过高）的问题

安装依赖

在需要打包的项目中安装

安装electron

npm install electron --save-dev

安装打包工具

npm install electron-packager --save-dev

main.js

将electron/electron-quick-start项目下的main.js拷贝到需要打包的项目的根目录下（vue2放到build目录下），不要改名
注意修改文件中loadFile的文件路径，例如mainWindow.loadFile(’./dist/index.html’)

修改package.json

• 添加"main": “main.js”
• 添加启动命令：“start”: “electron .”
• 用

  npm start

  启动
  
• 可将"start"修改为其他名字，如”electron_dev"，用

  npm run electron_dev

  启动
  
• 可以在启动命令中添加

  npm run build

  ，则执行该命令时将先执行一次build
  

项目启动

按照步骤4中的命令启动，必须保证存在dist目录

白屏

• vue2
  
• vue3
  

打包

修改package.json

"electron_build":"electron-packager ./dist/ --out ./exe/ --platform=win32 --arch=x64 --icon=./public/header.ico --overwrite"

electron-packager --out --platform= --arch= --icon=headericodir [optional flags…]

添加文件

• 将项目中的

  main.js

  和

  package.js

  复制到dist目录下
• 修改main.js的

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

运行

运行打包命令

npm run electron_build

• 点赞
• 收藏
• 分享
• 文章举报

SkyeBlack 发布了16 篇原创文章 · 获赞 10 · 访问量 639 私信 关注