Vue打包好的项目使用electron打包Windows桌面应用

1、 设置vue.config.js，添加 publicPath: './'

2、打包dist

yarn build

 3、package.json

{
	"name": "zxy-app",
	"productName": "是章小鱼呀",
	"author": "zxy",
	"version": "1.0.0",
	"main": "main.js",
	"license": "MIT",
	"description": "没有描述",
	"scripts": {
		"start": "electron .",
		"pack": "electron-builder --dir",
		"dist": "electron-builder",
		"postinstall": "electron-builder install-app-deps"
	},
	"build": {
		"electronVersion": "12.0.8",
		"icon": "logo_app.ico",
		"win": {
			"requestedExecutionLevel": "highestAvailable",
			"target": [{
				"target": "nsis",
				"arch": [
					"x64"
				]
			}]
		},
		"appId": "zxy-app",
		"artifactName": "demo-${version}-${arch}.${ext}",
		"nsis": {
			"artifactName": "demo-${version}-${arch}.${ext}"
		}
	},
	"devDependencies": {
		"core-js": "^2.4.1",
		"electron": "^16.0.0",
		"electron-builder": "^24.6.3",
		"electron-updater": "^4.0.0"
	}
}

4、main.js Electron文档

// 引入 electron 模块
const {
	app,
	BrowserWindow,
	Menu,
	Tray,
	dialog
} = require('electron')

const path = require('path')

//托盘对象
let appTray = null;
let flicker = null;
let win = null;
// 创建一个新窗口 
function createWindow() {
	win = new BrowserWindow({
		width: 1024,
		height: 650,
		// frame: false, //设置无边框
		// transparent: true, //设置无边框透明 不设置frame属性无效
		useContentSize: true,
		// 应用窗口名称
		title: '是章小鱼啊',
		// 应用窗口图标 
		icon: path.join(__dirname, 'logo.ico'),
	})

	// 加载本地 index.html 文件
	win.loadFile('index.html')
	// win.loadURL(`file://${__dirname}/index.html`) 等价于 win.loadFile('index.html')
	// win.loadURL() 可以更加灵活地指定文件的路径，尤其是当需要动态获取当前脚本文件所在目录的情况下。
	// 打开开发者工具
	// win.webContents.openDevTools()

	win.setFullScreen(true); //设置全屏
	// win.setMenu(null); //隐藏菜单

	//左上角菜单栏
	const template = [{
		label: '章小鱼',
		submenu: [{
				label: '刷新',
				role: 'reload'
			},
			{
				label: '最小化',
				role: 'minimize'
			},
			{
				label: '关闭',
				role: 'close'
			}
		]
	}]
	//把模板添加到Menu菜单中
	let m = Menu.buildFromTemplate(template);
	Menu.setApplicationMenu(m)

	// // 设置系统托盘图标 提示title
	// appTray = new Tray(path.join(__dirname, 'logo.ico'));
	// appTray.setToolTip('是章小鱼呀');

	// //单击右下角小图标显示应用
	// appTray.on('click', function() {
	// 	win.show();
	// })
	// //系统托盘右键菜单
	// var trayMenuTemplate = [{
	// 	label: '退出章小鱼',
	// 	click: function() {
	// 		app.exit();
	// 		app.exit(); //因为程序设定关闭为最小化，所以调用两次关闭，防止最大化时一次不能关闭的情况
	// 	}
	// }];
	// //图标的上下文菜单
	// const contextMenu = Menu.buildFromTemplate(trayMenuTemplate);
	// //设置此图标的上下文菜单
	// appTray.setContextMenu(contextMenu);

	//托盘图标闪烁
	// var count = 0;
	// flicker = setInterval(function() {
	// 	try {
	// 		if (count++ % 2 == 0) {
	// 			appTray.setImage(path.join(__dirname, 'logo.ico'));
	// 		} else {
	// 			//透明图标
	// 			//注：没有透明图片的话可以通过appTray.setImage(nativeImage.createFromPath(null))来设置
	// 			appTray.setImage(path.join(__dirname, 'static/map/images/circle.png'));
	// 		}
	// 	} catch {
	// 		clearInterval(flicker)
	// 		flicker = null
	// 	}
	// }, 400);

	// win.on('close', (event) => {
	// 	event.preventDefault(); // 阻止默认的窗口关闭行为
	// 	dialog.showMessageBox({
	// 		type: 'question',
	// 		title: '提示',
	// 		message: "是否要小化到托盘？",
	// 		buttons: ['小化到托盘', "退出"],
	// 	}).then(data => {
	// 		if (data.response === 1) {
	// 			app.exit()
	// 		} else {
	// 			win.minimize();
	// 		}
	// 	})
	// })
	
	win.on('closed', () => { //监听了窗口关闭事件。当窗口关闭时，将浏览器窗口对象回收。
		win = null
	})

	win.on('resize', () => { // 监听了窗口调整大小事件。当窗口被调整大小时，调用 win.reload() 方法重新加载当前窗口。
		win.reload();
	})
}

// 在应用程序准备就绪时，使用 app.whenReady() 方法创建一个窗口，然后添加了一个 activate 事件的监听器。
// 当应用程序被激活（例如，从任务栏点击图标）时，如果没有窗口存在，则调用 createWindow() 创建一个新窗口。
// 这样可以确保当应用程序被激活时，至少有一个窗口是可见的。
app.whenReady().then(() => { //是新版本 Electron 推荐的写法
	createWindow()
	app.on('activate', () => { // 当应用程序被激活（通常是通过点击应用程序的图标）时执行
		// BrowserWindow.getAllWindows().length === 0 和 win == null 都是用来检查窗口是否存在的方法
		// win == null 检查单个窗口对象是否存在，如果你只需要检查一个特定的窗口对象是否存在，或者你仅需要知道窗口是打开还是关闭状态，使用这种方法可能更方便。
		// BrowserWindow.getAllWindows().length 获取所有打开的窗口并计算其数量，如果你需要确保在所有窗口都关闭时才执行某个操作，使用这种方法会更可靠
		if (BrowserWindow.getAllWindows().length === 0) {
			createWindow()
			if (process.platform === 'darwin') {
				app.dock.show() // 在 macOS 下显示应用程序的图标
			}
		}
	})
})

// 当所有窗口都关闭时退出应用
app.on('window-all-closed', () => {
	// 如果操作系统不是 macOS（darwin），则调用 app.quit() 退出应用程序
	if (process.platform === 'darwin') {
		app.dock.hide() // 在 macOS 下隐藏应用程序的图标
	} else {
		app.quit()
	}
})

// //监听 ready 事件，当 Electron 应用程序准备就绪时，触发回调函数 createWindow() 创建窗口。
// app.on('ready', createWindow); //是旧版本的写法
// //监听 window-all-closed 事件，当所有窗口都被关闭时，调用 app.quit() 终止应用程序。
// app.on('window-all-closed', () => {
// 	// 如果操作系统不是 macOS（darwin），则调用 app.quit() 退出应用程序
// 	if (process.platform !== 'darwin') {
// 		app.quit()
// 	} else {
// 		app.dock.hide() // 在 macOS 下隐藏应用程序的图标
// 	}
// });
// //监听 activate 事件，当应用程序被激活（通常是通过点击应用程序的图标）时，检查窗口对象 win 是否为 null，如果是，则调用 createWindow() 创建窗口。
// app.on('activate', () => {
// 	if (win == null) {
// 		createWindow();
// 		if (process.platform === 'darwin') {
// 			app.dock.show() // 在 macOS 下显示应用程序的图标
// 		}
// 	}
// });

5、运行测试

yarn run start

6、打包

yarn run dist