前端vue項(xiàng)目打包成桌面端exe應(yīng)用的簡單步驟
更新時間:2025年06月20日 08:26:01 作者:Are楊
Electron是一個開源的框架,用于構(gòu)建跨平臺的桌面應(yīng)用程序,這篇文章主要介紹了前端vue項(xiàng)目打包成桌面端exe應(yīng)用的簡單步驟,文中給出詳細(xì)的代碼示例,需要的朋友可以參考下
主要 使用 Electron將 vue項(xiàng)目打包為 exe
1.首先下載Electron
git clone https://github.com/electron/electron-quick-start cd electron-quick-start npm install
安裝完依賴之后
npm start
運(yùn)行成功

注意:如果你的項(xiàng)目使用了VueRouter,那么切記:VueRouter一定不能是History模式
2.在electron-quick-start文件中安裝打包需要的依賴。
npm install electron-packager --save-dev
3.在 electron-quick-start 項(xiàng)目中 找到 main.js 文件修改其配置根據(jù)
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron');
const path = require('node:path');
function createWindow() {
// Create the browser window.
const mainWindow = new BrowserWindow({
resizable: true, //是否支持調(diào)整窗口大小
icon: './dist/favicon.ico', // 左上角圖標(biāo)
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js'),
},
});
// mainWindow.setMenu(null); // 隱藏頂部菜單欄
// and load the index.html of the app.
mainWindow.loadFile('./dist/index.html');
// Open the DevTools.
mainWindow.webContents.openDevTools();
// // 默認(rèn)窗口最大化
// mainWindow.maximize();
// mainWindow.show();
}
// 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.
4.在 electron-quick-start 項(xiàng)目 package.json 配置文件中,scripts 下添加 packager 指令(icon圖標(biāo),也可以不設(shè)置)
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ HumeErp --platform=win32 --icon=./dist/favicon.ico --arch=x64 --overwrite"
},
5.打包原 Vue 項(xiàng)目,將打包后生成的 dist 文件夾放在 electron-quick-start 項(xiàng)目中與node_modules 平級即可

6.輸入打包命令 npm run packager 執(zhí)行成功后,electron-quick-start 項(xiàng)目中會出現(xiàn)一個 App-win32-x64 的文件夾,該文件夾內(nèi) App.exe 即為項(xiàng)目的啟動文件


總結(jié)
到此這篇關(guān)于前端vue項(xiàng)目打包成桌面端exe應(yīng)用的文章就介紹到這了,更多相關(guān)前端vue打包成桌面端exe應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
利用Vue構(gòu)造器創(chuàng)建Form組件的通用解決方法
這篇文章主要給大家介紹了關(guān)于利用Vue構(gòu)造器創(chuàng)建Form組件的通用解決方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
淺談vue項(xiàng)目可以從哪些方面進(jìn)行優(yōu)化
本篇文章主要介紹了淺談vue項(xiàng)目可以從哪些方面進(jìn)行優(yōu)化,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-05-05
vue結(jié)合vant實(shí)現(xiàn)聯(lián)動效果
這篇文章主要為大家詳細(xì)介紹了vue結(jié)合vant實(shí)現(xiàn)聯(lián)動效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-01-01
vue和webpack打包項(xiàng)目相對路徑修改的方法
這篇文章主要介紹了vue和webpack打包項(xiàng)目相對路徑修改的方法,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-06-06

