electron 环境搭建
文档 | Electron
初始化项目
这里使用的是React的create-react-app初始化项目。
添加相关依赖
相关工具安装yarn add -D cross-env concurrently electron-builder
electron比较大，难安装，建议改为淘宝镜像,或者cnpm安装yarn add -D electron
创建electron入口文件
在public下创建electron.js
// 引入electron并创建一个Browserwindowconst {app, BrowserWindow, ipcMain, Menu } = require('electron')// 保持window对象的全局引用,避免JavaScript对象被垃圾回收时,窗口被自动关闭.let mainWindow;const template = [ { label: '编辑', submenu: [ { label: '剪切', accelerator: 'CmdOrCtrl+X', role: 'cut' }, { label: '复制', accelerator: 'CmdOrCtrl+C', role: 'copy' }, { label: '粘贴', accelerator: 'CmdOrCtrl+V', role: 'paste' }, { label: '全选', accelerator: 'CmdOrCtrl+A', role: 'selectall' } ] }, { label: '查看', submenu: [ { label: '重载', accelerator: 'CmdOrCtrl+R', click: function (item, focusedWindow) { if (focusedWindow) { // 重载之后, 刷新并关闭所有的次要窗体 if (focusedWindow.id === 1) { BrowserWindow.getAllWindows().forEach(function (win) { if (win.id > 1) { win.close(); } }); } focusedWindow.reload(); } } }, { label: '切换开发者工具', accelerator: (function () { if (process.platform === 'darwin') { return 'Alt+Command+I'; } else { return 'Ctrl+Shift+I'; } })(), click: function (item, focusedWindow) { if (focusedWindow) { focusedWindow.toggleDevTools(); } } } ] }];ipcMain.on('min', () => mainWindow.minimize());ipcMain.on('max', () => { if (mainWindow.isMaximized()) { mainWindow.unmaximize(); } else { mainWindow.maximize(); }});ipcMain.on('show', () => { mainWindow.show(); mainWindow.focus();});function createWindow () { // Create the browser window. mainWindow = new BrowserWindow({ width: 1050, height: 700, minHeight:700, minWidth:1050, webPreferences: { nodeIntegration: true, webSecurity: false // false 允许跨域 }, // frame:false, // 隐藏状态栏 // titleBarStyle: 'hidden' //mac隐藏状态栏 }) // 开发环境使用 http 协议 生产环境使用 file 协议 if (process.env.NODE_ENV === 'dev') { mainWindow.loadURL('http://localhost:3000/'); // 打开开发者工具，默认不打开 mainWindow.webContents.openDevTools() } else { mainWindow.loadURL(`file://${__dirname}/index.html`); } // 关闭window时触发下列事件. mainWindow.on('closed', function () { mainWindow = null })}// 当 Electron 完成初始化并准备创建浏览器窗口时调用此方法app.on('ready', ()=>{ createWindow(); const menu = Menu.buildFromTemplate(template); Menu.setApplicationMenu(menu);})// 所有窗口关闭时退出应用.app.on('window-all-closed', function () { // macOS中除非用户按下 `Cmd + Q` 显式退出,否则应用与菜单栏始终处于活动状态. if (process.platform !== 'darwin') { app.quit(); }})app.on('activate', function () { // macOS中点击Dock图标时没有已打开的其余应用窗口时,则通常在应用中重建一个窗口 if (mainWindow === null) { createWindow() }})app.on('before-quit', (e) => { mainWindow = null;});修改package.json
- 添加
"main": "./public/electron.js" 将打包文件路径配置为绝对路径
React下添加"homepage": "."
Vue下则在根目录创建vue.config.jsmodule.exports = { // 基本路径 publicPath: './', // 输出文件目录 outputDir: 'dist', // webpack-dev-server 相关配置 devServer: { port: 3000, }}- 添加打包配置，nsis为安装选项配置。
修改scripts
...... "main": "./public/electron.js", "homepage": ".", "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test", "eject": "react-scripts eject", "ele-start": "cross-env NODE_ENV=dev electron .", "pc": "concurrently \"yarn start\" \"yarn ele-start\"", "ele-build": "electron-builder --win --x64" }, "build": { "productName": "XXXX", "appId": "org.XXXX.app", "mac": { "target": [ "dmg", "zip" ] }, "win": { "icon": "./public/icon.ico", "target": [ "nsis" ] }, "nsis": { "oneClick": false, "perMachine": true, "allowElevation": true, "allowToChangeInstallationDirectory": true, "createDesktopShortcut": true, "createStartMenuShortcut": true, "shortcutName": "Y-Music" } }, ......运行
yarn pc运行，等待React程序加载完（即弹出的页面有内容），Ctrl+R刷新下electron应用内容就相应出来了。