vue 使用 Electron打包成桌面应用
程序员文章站
2022-06-04 15:17:14
...
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就能看到打包的桌面应用
上一篇: electron打包vue项目成桌面应用
推荐阅读
-
使用electron将vue-cli项目打包成exe的方法
-
使用Electron构建React+Webpack桌面应用的方法
-
React+Electron封装并打包成桌面应用
-
Vue3和Electron实现桌面端应用详解
-
electron-vue跨平台桌面应用开发实战教程(十二)——集成加密版的sqlite3:sqlcipher
-
使用electron将vue-cli项目打包成exe的方法
-
electron-vue:Vue.js 开发 Electron 桌面应用
-
如何将一个现有的Vue网页项目封装成electron桌面应用
-
Vue+Electron实现简单桌面应用
-
electron之Windows下使用 html js css 开发桌面应用程序