vue 项目集成 electron 和 electron 打包及环境配置方法
作者:mr_cmx
vue + electron 开发桌面端应用
安装 electron
npm i electron -D
记得加上-D
,electron 需添加到devDependencies,如果添加到dependencies后面运行可能会报错
根目录创建electron文件夹,在electron文件夹创建main.js(或者background.js)
在文件中添加如下代码:
// 控制应用生命周期和创建原生浏览器窗口的模组 const { app, BrowserWindow, Menu } = require('electron') const path = require('path') function createWindow() { // 创建浏览器窗口 const mainWindow = new BrowserWindow({ width: 1200, height: 800, webPreferences: { // 书写渲染进程中的配置 nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API contextIsolation: false, // 可以使用require方法 enableRemoteModule: true, // 可以使用remote方法 }, }) // 加载 index.html mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增 } // 这段程序将会在 Electron 结束初始化 // 和创建浏览器窗口的时候调用 // 部分 API 在 ready 事件触发后才能使用。 app.whenReady().then(() => { createWindow() app.on('activate', function () { // 通常在 macOS 上,当点击 dock 中的应用程序图标时,如果没有其他 // 打开的窗口,那么程序会重新创建一个窗口。 if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) // 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此,通常对程序和它们在 // 任务栏上的图标来说,应当保持活跃状态,直到用户使用 Cmd + Q 退出。 app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() })
修改package.json
1、在scripts同级下添加
"main": "electron/main.js",
根据实际的文件路径配置
2、查看是否存在"type": "module"
配置
如果有,则删除"type"
配置,因为main中用的不是es6的模块引入
3、"scripts"
中添加"electron:dev": "electron ."
,用于启用electron
现在就可以通过npm run electron:dev
运行electron了
因为上面main.css运行的是 dist文件夹 中的 index.html ,所以如果没有该文件的得先npm run build
多环境配置并在本地开发时使用热更新
安装 electron-reload
npm i electron-reload
修改”scripts“ 指令
"electron:dev": "set ELECTRON_ENV=development& electron .",
在本地运行时添加值为 ‘development’ 的 ELECTRON_ENV
环境变量
修改main.js内容
完整代码如下
// 控制应用生命周期和创建原生浏览器窗口的模组 const { app, BrowserWindow, Menu } = require('electron') const path = require('path') function createWindow() { // 创建浏览器窗口 const mainWindow = new BrowserWindow({ width: 1200, height: 800, webPreferences: { // 书写渲染进程中的配置 nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API contextIsolation: false, // 可以使用require方法 enableRemoteModule: true, // 可以使用remote方法 }, }) console.log("process.env.ELECTRON_ENV", process.env.ELECTRON_ENV) // let env = 'pro' let env = process.env.ELECTRON_ENV // 环境变量 ELECTRON_ENV 值为 development 则使用热更新 // 配置热更新 if (env == 'development') { const elePath = path.join(__dirname, '../node_modules/electron') require('electron-reload')('../', { electron: require(elePath), }) // 热更新监听窗口 mainWindow.loadURL('http://localhost:3100') // 打开开发工具 mainWindow.webContents.openDevTools() } else { // 生产环境中要加载文件,打包的版本 Menu.setApplicationMenu(null) // 加载 index.html mainWindow.loadFile(path.resolve(__dirname, '../dist/index.html')) // 新增 } } // 这段程序将会在 Electron 结束初始化 // 和创建浏览器窗口的时候调用 // 部分 API 在 ready 事件触发后才能使用。 app.whenReady().then(() => { createWindow() app.on('activate', function () { // 通常在 macOS 上,当点击 dock 中的应用程序图标时,如果没有其他 // 打开的窗口,那么程序会重新创建一个窗口。 if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) // 除了 macOS 外,当所有窗口都被关闭的时候退出程序。 因此,通常对程序和它们在 // 任务栏上的图标来说,应当保持活跃状态,直到用户使用 Cmd + Q 退出。 app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() })
这里 http://localhost:3100 为我本地开发时项目运行的url
运行
本地启动web项目
一般是:npm run dev
然后再:npm run electron:dev
启动electron。这样electron就可以实时监听窗口了。
打包应用
安装 electron-builder
npm i electron-builder -D
package.json中新增scripts
"electron:build": "vite build --mode application & electron-builder build --config electron-builder.json",
创建 electron-builder.json 进行打包配置
{ "appId": "com.example.myapp", "productName": "app名字", "files": ["./electron/main.js", "./dist"], "extraFiles": ["./videos", "./cvideo"], "directories": { "output": "./buileder" }, "nsis": { "oneClick": false, "perMachine": true, "allowToChangeInstallationDirectory": true }, "win": { "icon": "public/icon.png", "target": ["nsis", "zip"] }, "mac": { "icon": "public/icon.png", "target": "dmg" }, "linux": { "icon": "public/icon.png", "target": "AppImage" }, "dmg": { "contents": [ { "x": 110, "y": 150 }, { "x": 240, "y": 150, "type": "link", "path": "/Applications" } ] }, "appx": { "publisher": "CN=app名字" } }
public/icon.png 为应用的icon图标,没有的话可以删除
运行打包命令
npm run electron:build
打包成功后,在根目录会出现一个buileder文件夹,打包后的应用就在里面
打包过程中常见的一些坑
一、打包后没有报错,但打开后一片空白
打开调试工具发现文件引入失败,且引入路径也不对。这种一般是根路径配置问题
解决方法:
1、配置base,以vite为例
在vite.config.ts中添加base配置
export default defineConfig({ base: './', })
2、在 index.html 中查看head中是否有这段标签
<base href="/" rel="external nofollow" >
注意!注意!注意!(这个bug我之前找了好一会儿才发现)
有的话删除掉
二、如果报:Package "electron" is only allowed in "devDependencies". Please remove it from the "dependencies
"
这个错误表示package.json文件中依赖electron应该在 devDependencies而不是dependencies中
解决方法:
将electron移到devDependencies,并重装依赖
三、如果报类似 http://github.com/xxxx/xxxx
的错误一般是网络问题
解决方法:
过一会儿再尝试,或者科学上网
四、如果报类似 zip: not a valid zip file github.com/develar/app-builder/pkg/archive/zipx.(*Extractor).extractAndWriteFile
的错误
解决方法:
重装依赖
到此这篇关于vue 项目集成 electron 和 electron 打包及环境配置的文章就介绍到这了,更多相关vue 集成 electron 和 electron 打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
您可能感兴趣的文章:
- vue配置electron使用electron-builder进行打包的操作方法
- vue3使用Electron打包成exe的方法与打包报错解决
- 使用electron打包Vue前端项目的详细流程
- 如何使用electron将vue项目打包成.exe文件(保姆级教程)
- 解决electron打包vue-element-admin项目页面无法跳转的问题小结
- vue项目使用electron进行打包操作的全过程
- 手把手教你使用electron将vue项目打包成exe
- 关于electron-vue打包后运行白屏的解决方案
- vue项目打包成桌面快捷方式(electron)的方法
- 用electron打包vue项目中的报错问题及解决