需求:
一个vue项目打包放在windows系统 以桌面应用程序的方式打开。
准备:
1.electron ----- 可以在当前vue项目中 直接通过npm 安装 或者去官网git一个demo
官方demo地址:https://github.com/electron/electron-quick-start
vue项目安装命令
npm install electron --save-dev //安装electron
npm install electron-packager --save-dev // 安装打包exe工具
2.vue项目 ---- vue项目本身打包dist后 访问是不能出现问题的,也就是保证你打的包是正常的,不要类似icon 无法加载,以及空白页面等 这样打包exe后才不会出现大问题
3.Inno Setup ---- 对打包后的exe应用程序 进一步打包成为一个安装包,因为上面的打包的exe会包含有大量文件,不可能这样发给用户使用,用户使用只需要下载一个安装包,安装即可
官方地址https://jrsoftware.org/isdl.php 可以在官方下载
也可以在各大应用商店,360软件管家,腾讯管家等直接搜索下载安装
开始:
以下是按照在 electron 官方demo的基础上进行修改 ,毕竟不熟悉不敢在原vue项目操作 ,原vue项目操作的需要配置,可以自行百度一大把
1.Git clone https://github.com/electron/electron-quick-start
2.打开clone的项目 先安装 npm install
3.运行demo npm run start 不出意外会弹出下面的界面
demo的目录以及功能
main.js:如下图
标记1 是窗口的配置默认宽高,更多配置看官网options
https://www.electronjs.org/docs/api/browser-window#new-browserwindowoptions
标记2 是加载一个html文件,更多配置看官方文档 实例方法