打包流程詳情步驟：

1、準備工作：

? ? ? ? a、win7系統則確保node版本在v12以上，electron-builder對系統或版本有要求；

? ? ? ? b、項目路徑不使用中文；

? ? ? ? c、使用淘寶鏡像命令代替npm管理工具?

npm install?-g cnpm?--registry=https://registry.npm.taobao.org

? ? ? ? d、命令窗口中可以使用 “? cd.. ”? 返回上一級目錄

? ? ? ? e、修改config > index.js 文件

????????

????????和?bulid > utils.js文件中的圖片路徑

?????????

2、使用 npm run build 對vue項目打包生成dist 文件

3、cd dist? 命令切換到dist文件夾目錄下安裝依賴，后續操作都在該文件下

使用命令 npm install --save-dev moduleName@version 安裝開發依賴 "devDependencies": {"electron": "^7.1.9","electron-builder": "^22.9.1" },使用命令 npm install -S moduleName@version 安裝運行必備依賴 "dependencies": {"core-js": "^2.4.1","electron-packager": "^12.1.0","electron-updater": "^4.0.14" }

4、在dist文件下創建主程序入口和package.json配置文件

main.js

const {app, BrowserWindow} =require('electron');//引入electron let win; let windowConfig = {width:800,height:600,webPreferences: {contextIsolation: false} };//窗口配置程序運行窗口的大小 function createWindow(){win = new BrowserWindow(windowConfig);//創建一個窗口win.loadURL(`file://${__dirname}/index.html`);//在窗口內要展示的內容index.html 就是打包生成的index.htmlwin.webContents.openDevTools(); //開啟調試工具win.on('close',() => {//回收BrowserWindow對象win = null;});win.on('resize',() => {win.reload();}) } app.on('ready',createWindow); app.on('window-all-closed',() => {app.quit(); }); app.on('activate',() => {if(win == null){createWindow();} });

package.json

{"name": "demo","productName": "項目名稱","author": "作者","version": "1.0.4","main": "main.js","description": "項目描述","scripts": {"pack": "electron-builder --dir","dist": "electron-builder","postinstall": "electron-builder install-app-deps"},"build": {"electronVersion": "1.8.4","win": {"requestedExecutionLevel": "highestAvailable","target": [{"target": "nsis","arch": ["x64"]}]},"appId": "demo","artifactName": "demo-${version}-${arch}.${ext}","nsis": {"artifactName": "demo-${version}-${arch}.${ext}"},"extraResources": [{"from": "./static/xxxx/","to": "app-server","filter": ["**/*"]}]},"devDependencies": {"electron": "^7.1.9","electron-builder": "^22.9.1"},"dependencies": {"core-js": "^2.4.1","electron-packager": "^12.1.0","electron-updater": "^4.0.14"} }

5、執行命令? electron .? 使項目轉為應用程序展示如圖

5、執行命令? electron-builder 將項目打包為應用程序包如圖

問題記錄：

1、頁面空白

????????解決方式：使用正確的依賴路徑，路由不使用history模式；

2、electron-builder錯誤? Get "https://github.com/electron/electron/releases/download/v1.8.4/electron-v1.8.4-win32-x64.zip"

????????解決方式：下載對應版本到?C:\Users\*****\AppData\Local\electron-builder\cache\ 位置。需要注意的是，不僅要下載這個壓縮包，還要把對應的SHASUMS256.txt-文件也下載下來放進去；

參考鏈接：

流程細節參考https://www.cnblogs.com/jiangxifanzhouyudu/p/9517651.html

修改應用窗口圖標、名稱、尺寸等參考https://zhuanlan.zhihu.com/p/75764907

總結

以上是生活随笔為你收集整理的vue项目使用electron打包成桌面应用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。