1. 前言: 上篇文章中使用到了Vue+Electron框架,这一篇文章主要讲解这个框架如何搭建
2. Vue3+Vite项目搭建
- 执行命令行,创建
Vue3+Vite脚手架:npm create vite或yarn create vite
- 修改脚手架中的无用部分
- 删除src/components下的所有文件
- 修改src/App.vue内容
<!-- * @Author: wangzhiyu <[email protected]> * @version: 1.0.0 * @Date: 2024-04-04 23:00:32 * @LastEditTime: 2024-04-04 23:06:55 * @Descripttion: 根组件 --> <template>App</template> <script setup></script> <style></style>
- 初始化项目依赖
// package.json // 首先初始化项目基础依赖 npm i 或 yarn add // 下载关于electron以及项目所需的依赖包 npm install [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] -D // 或 yarn add [email protected] [email protected] [email protected] [email protected] [email protected] [email protected] -D
3. 增加electron支持
-
自定义package.json的
scripts// package.json "scripts": { // 启动开发服务器(浏览器端调试使用) "dev": "vite dev", // 打包前端包 "build": "vite build", // 启动开发调试桌面端 "electron:start": " concurrently -k \"vite \" \"cross-env IS_DEV=true electron . \"", '// 打包桌面端应用(前提是前端包已经打好了) "electron:build.win": "electron-builder --win --dir", } -
指定打包的桌面端应用程序文件存存放的地址
// package.json { // ...其他配置 "build": { "directories": { "output": "dist_electron" } } } -
vite.config.js中设置文件路径为./
// vite.config.js import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ base: './', plugins: [vue()], }) -
指定nodejs入口文件(electron的执行文件),另外注意删掉
package.json中的module// package.json { // ...其他配置 "main": "electron/index.js", } // 在项目的根目录新建一个electron文件夹,并新建一个index.js,作为electron的入口执行文件 -
编写electron/index.js内容
/* * @Author: wangzhiyu <[email protected]> * @version: 0.0.0 * @Date: 2024-04-04 23:00:32 * @LastEditTime: 2024-04-04 23:29:27 * @Descripttion: electron入口文件 */ // !: 这里的electron.js将会在node环境下运行 const path = require('path') // 导入electronAPI const { app, BrowserWindow, Menu, ipcMain } = require('electron'); // 初始化桌面端应用 function createWindow() { // TODO: 根据不同环境设置不同的应用配置 const isDev = process.env.IS_DEV === 'true' console.log(isDev, 'isDev'); // 主窗口 let mainWindow = null // 如果当前为开发环境,则执行开发环境的配置 if (isDev === 'true') { // 根据不同环境设置不同的应用配置 mainWindow = new BrowserWindow({ fullscreenable: false, fullscreen: false, simpleFullscreen: true, webPreferences: { nodeIntegration: true, contextIsolation: false, webSecurity: false, allowRunningInsecureContent: true, }, }); // 打开控制台 mainWindow.webContents.openDevTools(); } else { // 生产环境的配置 mainWindow = new BrowserWindow({ fullscreenable: false, fullscreen: false, simpleFullscreen: true, webPreferences: { nodeIntegration: true, contextIsolation: false, webSecurity: false, allowRunningInsecureContent: true, }, }); } // 如果为 dev 环境加载本地url,否则加载打包后的index.html mainWindow.loadURL(isDev ? 'http://localhost:5173' : `file://${path.join(__dirname, '../dist/index.html')}`); } // 此方法将在Electron完成后调用,初始化,并准备创建浏览器窗口。 app.whenReady().then(() => { // 创建windows应用 createWindow(); // 延迟3s 等待应用激活 setTimeout(() => { console.log('已经过了3s了'); app.on('activate', function () { // 如果应用激活后,窗口依然为0,则重新创建windows应用 if (BrowserWindow.getAllWindows().length === 0) createWindow(); }); }, 3000) }); // 应用销毁触发 app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit(); } }); -
然后执行启动桌面端应用服务(开发环境)
npm run electron:start
// 或
yarn electron:start
// 即可探出以下窗口,这个窗口就是开发环境下的桌面端应用
4. 打包桌面端应用
// 首先执行静态资源打包命令
yarn build
// 然后打包桌面端应用程序
yarn electron:build.win
// 之后去项目根目录下会看到一个dist_electron文件夹,打开后点开win-unpacked文件夹,双击.ext应用程序即可启动
