Vue使用electron生成桌面應(yīng)用過程詳解
學習關(guān)鍵語句
使用electron打包vue項目
electron制作桌面應(yīng)用
寫在前面
很想使用 electron 制作一個桌面應(yīng)用,但是真的上手使用的時候才發(fā)現(xiàn) electron 的坑實在是太多了
先將遇到的坑記錄在這里,遇到一個記錄一個
- 使用 9 以上版本的 vue-i18n 的項目打包成應(yīng)用時會失敗,本地運行沒問題
- 項目路徑中有中文會打包失敗
和 electron 相關(guān)的插件版本更替實在是是太快,并且版本之間還不一定能兼容,所以這篇文章中使用到的插件都會寫死版本來保證一定可以打包成功
開始
項目開始
我們不從零開始,直接從之前的項目中拉一個文件來作為例子,你可以點擊這里進行下載項目,不需要積分
值得一提的是,這篇文章不會提供完整的文件,你可以使用下載的項目開始學習
安裝依賴
安裝指定版本 此時日期為 2023-04-11
npm i electron@24.0.0 -D
npm i vite-plugin-electron@0.11.1 -D
npm i electron-builder@23.6.0 -D
npm i cross-env@7.0.3
針對項目由 vite 創(chuàng)建的 vue3 項目
修改 vite.config.ts
變動語句
vite.config.ts 變動
import electron from 'vite-plugin-electron' electron({ entry: "dist-electron/index.js" })
放入語句
vite.config.ts 放入
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import electron from 'vite-plugin-electron' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), electron({ entry: "dist-electron/index.js" }) ], })
修改完成后,會自動在項目根目錄出現(xiàn) dist-electron 文件夾,文件夾內(nèi)有一個文件 index.js
如果沒有自動出現(xiàn),那就手動創(chuàng)建
修改 index.js
index.js
import { app, BrowserWindow } from 'electron' import path from 'path' // app 控制應(yīng)用程序的事件生命周期。 // BrowserWindow 創(chuàng)建并控制瀏覽器窗口。 let win; // 定義全局變量獲取 窗口實例 const createWindow = () => { win = new BrowserWindow({ webPreferences: { devTools: true, contextIsolation: false, nodeIntegration: true // 允許html頁面上的javascipt代碼訪問nodejs 環(huán)境api代碼的能力(與node集成的意思) } }) if (process.env.NODE_ENV != 'development') { win.loadFile(path.join(__dirname, "../dist/index.html")); } else { // vite-plugin-electron@0.11.1版本使用以下 win.loadURL(`${process.env['VITE_DEV_SERVER_URL']}`) } } //在Electron完成初始化時被觸發(fā) app.whenReady().then(createWindow)
修改 package.json
- 刪除 “type”: “module”
- “name” 同級添加 “main”: “dist-electron/index.js”
- ,將 script 中的 dev 指令修改為 cross-env NODE_DEV=development vite
- 將 script 中的 build 指令修改為 vue-tsc --noEmit && vite build && electron-builder
將以下添加到 “name” 同級
"build": { "appId": "com.electron.desktop", "productName": "electron", "asar": true, "copyright": "Copyright ? 2023 electron", "directories": { "output": "release/" }, "files": [ "dist", "dist-electron" ], "mac": { "artifactName": "${productName}_${version}.${ext}", "target": [ "dmg" ] }, "win": { "target": [ { "target": "nsis", "arch": [ "x64" ] } ], "artifactName": "${productName}_${version}.${ext}" }, "nsis": { "oneClick": false, "perMachine": false, "allowToChangeInstallationDirectory": true, "deleteAppDataOnUninstall": false }, "publish": [ { "provider": "generic", "url": "http://127.0.0.1:8086" } ], "releaseInfo": { "releaseNotes": "版本更新的具體內(nèi)容" } }
本地測試
npm run dev
會自動打開
打包成exe文件
npm run build
輸出在項目根目錄下新建的文件夾 release 中,雙擊 exe 文件進行安裝就可以打開了
到此這篇關(guān)于Vue使用electron生成桌面應(yīng)用過程詳解的文章就介紹到這了,更多相關(guān)Vue electron生成桌面應(yīng)用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用 vue 實例更好的監(jiān)聽事件及vue實例的方法
這篇文章主要介紹了使用 vue 實例更好的監(jiān)聽事件及vue實例的方法,介紹了一種新增 vue 實例的方法,單獨監(jiān)聽事件,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-04-04element ui中表單el-form的label如何設(shè)置寬度
這篇文章主要介紹了element ui中表單el-form的label如何設(shè)置寬度,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-10-10