打包流程詳情步驟：

1、準(zhǔn)備工作：

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

? ? ? ? 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文件夾目錄下安裝依賴，后續(xù)操作都在該文件下

使用命令 npm install --save-dev moduleName@version 安裝開發(fā)依賴 "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文件下創(chuàng)建主程序入口和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);//創(chuàng)建一個窗口win.loadURL(`file://${__dirname}/index.html`);//在窗口內(nèi)要展示的內(nèi)容index.html 就是打包生成的index.htmlwin.webContents.openDevTools(); //開啟調(diào)試工具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、執(zhí)行命令? electron .? 使項目轉(zhuǎn)為應(yīng)用程序展示如圖

5、執(zhí)行命令? electron-builder 將項目打包為應(yīng)用程序包如圖

問題記錄：

1、頁面空白

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

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

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

參考鏈接：

流程細(xì)節(jié)參考https://www.cnblogs.com/jiangxifanzhouyudu/p/9517651.html

修改應(yīng)用窗口圖標(biāo)、名稱、尺寸等參考https://zhuanlan.zhihu.com/p/75764907

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。