vue 使用 Electron打包成桌面應用
阿新 • • 發佈:2018-11-08
1. cd目錄到 npm run build 生成的dist資料夾
2.dist目錄下新建package.json、electron.js檔案,內容如下:
{ "name": "FloorGuidance", "version": "1.0.0", "description": "A minimal Electron application", "main": "electron.js", "scripts": { "start": "electron ." }, "repository": "https://github.com/electron/electron-quick-start", "keywords": [ "Electron", "quick", "start", "tutorial", "demo" ], "author": "ZhanXing", "license": "CC0-1.0", "devDependencies": { "electron": "~1.7.8" } }
electron.js:
const electron = require('electron') // Module to control application life. const app = electron.app // Module to create native browser window. const BrowserWindow = electron.BrowserWindow const path = require('path') const url = require('url') // Keep a global reference of the window object, if you don't, the window will // be closed automatically when the JavaScript object is garbage collected. let mainWindow function createWindow () { // Create the browser window. mainWindow = new BrowserWindow({width: 1080, height: 1920}) // and load the index.html of the app. mainWindow.loadURL(url.format({ pathname: path.join(__dirname, 'index.html'), protocol: 'file:', slashes: true })) // Open the DevTools. // mainWindow.webContents.openDevTools() // Emitted when the window is closed. mainWindow.on('closed', function () { // Dereference the window object, usually you would store windows // in an array if your app supports multi windows, this is the time // when you should delete the corresponding element. mainWindow = null }) } // 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.on('ready', createWindow) // Quit when all windows are closed. app.on('window-all-closed', function () { // On OS X it is common for applications and their menu bar // to stay active until the user quits explicitly with Cmd + Q if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', function () { // On OS X 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 (mainWindow === null) { createWindow() } })
3.npm install electron -g
4.npm install electron-packager -g
5.命令列輸入:electron-packager . 可執行檔案的檔名 --win32 --out 打包成的資料夾名 --arch=x64 --overwrite --ignore=node_modules
如:electron-packager . app --win32 --out presenterTool --arch=x64 --overwrite --ignore=node_modules
執行後會生成presenterTool資料夾 執行app.exe就能看到打包的桌面應用