Electron
通过electron-quick-start
打包生成EXE可执行文件
# 安装electron-quick-start
git clone https://github.com/electron/electron-quick-start
npm i
1
2
2
# 安装依赖electron-packager
npm install electron-packager --save-dev
1
# 配置package.json
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
},
1
2
3
4
2
3
4
# 打包
打包出vue-code
vue-code中文件全选>复制>X:\electron-quick-start
打开X:\electron-quick-start 终端 npm run packager
X:\electron-quick-start下出现App-win32-x64 整个复制发出(内App.exe即为单击文件,可创建快捷方式至桌面)
# 扩展
一个离线版调用另一个离线版的情况下参考下面的内容
在
electron-quick-start
中的main.js
修改1️⃣跨域问题2️⃣Node环境问题// Modules to control application life and create native browser window const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow () { // Create the browser window. const mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), // 打包解决CORS webSecurity: false, // 支持node环境 nodeIntegration:true, } }) // and load the index.html of the app. mainWindow.loadFile('index.html') // Open the DevTools. // mainWindow.webContents.openDevTools() } // This method will be called when Electron has finished // initialization and is ready to create browser windows. // Some APIs can only be used after this event occurs. app.whenReady().then(() => { createWindow() app.on('activate', function () { // On macOS it's common to re-create a window in the app when the // dock icon is clicked and there are no other windows open. if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) // Quit when all windows are closed, except on macOS. There, it's common // for applications and their menu bar to stay active until the user quits // explicitly with Cmd + Q. app.on('window-all-closed', function () { if (process.platform !== 'darwin') app.quit() }) // In this file you can include the rest of your app's specific main process // code. You can also put them in separate files and require them here.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48在
preload.js
预处理文件中添加以下方法contextBridge.exposeInMainWorld 相当于给打包好的Vue暴露了一个全局的方法
调用
window.$electron.open(`xxxx --xxx --xxx`)
1
/** * The preload script runs before. It has access to web APIs * as well as Electron's renderer process modules and some * polyfilled Node.js functions. * * https://www.electronjs.org/docs/latest/tutorial/sandbox */ const { contextBridge, ipcRenderer } = require('electron') var cp = require('child_process') window.addEventListener('DOMContentLoaded', () => { const replaceText = (selector, text) => { const element = document.getElementById(selector) if (element) element.innerText = text } for (const type of ['chrome', 'node', 'electron']) { replaceText(`${type}-version`, process.versions[type]) } }) contextBridge.exposeInMainWorld('$electron', { open:(item)=>{ cp.exec(`${item}`, function(error, stdout, stderr) { console.log("error", error); console.log("stdout", stdout); console.log("stderr", stderr); }); } })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31判断是否为
electron
环境isElectron(){ let userAgent = window.navigator.userAgent; return userAgent.toLowerCase().indexOf(" electron/") > -1; }
1
2
3
4
编辑 (opens new window)
上次更新: 2024-07-15 23:22:40