vue3+electron12+dll開發客戶端配置詳解
當前使用的版本為 @vue/cli4 創建的 vue3.0 + typescript + electron 12 版本創建，其他版本暫未測試。網上資料良莠不齊，因此花費時間依次試驗，達到一個目前最優解。
修改倉庫源
由於electron版本的未知性，可能存在serve可用而build之後打開白屏的情況，因此需要謹慎對待。最好在版本可用的情況下commit一個版本，方便代碼回滾，如果誰有更好的資料希望共享。
在開始配置前，可以將yarn和npm的rc文件稍作修改，使用命令或者文件直接修改.npmrc或者.yarnrc，這兩個全局配置文件一般在C:\user\你的當前賬戶這個文件夾下，或者在當前項目下新建文件命令rc文件以局部更改配置。
因為electron下載會因為網絡問題而失敗，因此修改為淘寶源，華為源亦可。
npm set config registry http://registry.npm.taobao.org/ npm set config chromedriver_cdnurl http://registry.npm.taobao.org/chromedriver npm set config electron_mirror http://registry.npm.taobao.org/electron/ npm set config electron_builder_binaries_mirror http://registry.npm.taobao.org/electron-builder-binaries/
安裝過程使用 vue create <your projectname> 自選為vue3版本，內容創建後進入項目目錄，追加 vue electron-builder 配置electron，版本選擇當前12版本。
啟動
在package.json中已經裝配好對應的啟動命令，
- 使用npm run electron:serve 開啟開發
- npm run electron:build 編譯打包生產
更換vue-devtools
項目工程下 src/background.ts 為electron的啟動目錄，開發環境下會出現啟動等待時間較長的以下情況
Launching Electron…
Failed to fetch extension, trying 4 more times
Failed to fetch extension, trying 3 more times
Failed to fetch extension, trying 2 more times
Failed to fetch extension, trying 1 more times
是因為項目需要聯網谷歌商店下載並加載vue-devtools失敗導致。
嘗試瞭很多辦法加載tools均失效，因此暫行手段：去掉tools。代碼找到，去掉 installExtension 即可
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
// await installExtension(VUEJS_DEVTOOLS)
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
})
之前試瞭很多辦法，不可用。後來再仔細對照以下，發現瞭一些問題。
vue3的版本和vue2版本的vue-devtools已然不同，所以vue2的dev-tools並不能給vue3使用，因此，需要下載vue3對應的開發工具。vue2版本最新為5.x，而vue3的版本則為6.x beta版本。可以通過crx4chrome下載此版本的插件。將下載好的crx解壓出來，然後拷貝到工程根目錄下 采用session加載的形式，將原來 await installExtension(VUEJS_DEVTOOLS)的部分替換為
import {session} from 'electron'
app.on('ready', async () => {
if (isDevelopment && !process.env.IS_TEST) {
// Install Vue Devtools
try {
const vue_devtools = 'ljjemllljcmogpfapbkkighbhhppjdbg-6.0.0-beta-13-Crx4Chrome.com'
await session.defaultSession.loadExtension(path.resolve(vue_devtools))
} catch (e) {
console.error('Vue Devtools failed to install:', e.toString())
}
}
createWindow()
})
啟動項目後，即可以查看 vue 的擴展。 對於
(node:5904) ExtensionLoadWarning: Warnings loading extension at E:\scan\vue3_electron\ljjemllljcmogpfapbkkighbhhppjdbg-6.0.0-beta-13-Crx4Chrome.com:
Unrecognized manifest key ‘browser_action’.
Unrecognized manifest key ‘update_url’.
Permission ‘contextMenus’ is unknown or URL pattern is malformed.
Cannot load extension with file or directory name _metadata. Filenames starting with “_” are reserved for use by the system.
(Use `electron –trace-warnings …` to show where the warning was created)
可以不予理會。如果不想看到煩人的提示可以到tools的manifest.json中刪掉提示對應的內容
註意事項
<script setup> 語法不可以使用
當使用script-setup作為模塊時，在serve階段可以正常使用，但是在build之後組件未加載，頁面呈現空白，且不報錯，原因未知
使用 electron-edge-js 加載 c# 開發的 dll 文件，配置過程略微繁瑣，花費2天時間尋求解答，但是均未果，以下是解決辦法，需要對癥下藥
c++和c#開發的dll使用不同的加載器，c++使用ffi-napi。
使用edge需要同時增加三處配置
當什麼都沒有配置時，將會發生 Uncaught (in promise) Error: Cannot find module ‘…\node_modules\electron\dist\resources\electron.asar\renderer\native\win32\x64\14.16.0\edge_nativeclr’ 此時需要在vue.config.js文件增加，如果沒有配置文件，則需要在package.json同級創建。
module.exports = {
pluginOptions: {
electronBuilder: {
externals: ['electron-edge-js']
}
}
}
當配置未開啟時，將不能使用 __dirname __filename等nodejs內置變量
Uncaught (in promise) ReferenceError: __dirname is not defined 首先需要配置 new BrowserWindow
{
// 如果使用到nodejs的api，則打包時需要將此設置為true
nodeIntegration: true,
// 同時，需要設置此項為false
// 未設置時報 Uncaught ReferenceError: require is not defined
contextIsolation: false
}
以上配置完成後會報 Uncaught (in promise) TypeError: fs.existsSync is not a function
此時需要繼續增加 vue.config.js 的配置項
module.exports = {
pluginOptions: {
electronBuilder: {
externals: ['electron-edge-js'],
// 此處同樣需要開啟，將會在編譯階段將引用關系寫入
nodeIntegration: true,
}
}
}
如果單獨配置此項，但是並沒有開啟 new BrowserWindow的 nodeIntegration: true ,則會發生 Uncaught ReferenceError: require is not defined
此外，對於dll放置的文件夾，一般在項目根目錄創resources用於存放資源，並且項目打包過程中會不會直接打包資源目錄，所以需要增加資源配置，以防止出錯。對於文件的引用，在開發環境下，為當前所看到的結構，當編譯打包後，為安裝目錄下resources目錄，所以生產和開發的引用文件存在一定區別，可以實驗後再看文件引用
module.exports = {
pluginOptions: {
electronBuilder: {
externals: ['electron-edge-js'],
// 此處同樣需要開啟，將會在編譯階段將引用關系寫入
nodeIntegration: true,
builderOptions:{
extraResources: {
// 拷貝靜態文件到指定位置，否則會提示文件找不到
from: 'resources/',
to: './'
},
}
}
}
}
提供文件獲取目錄方法，可以直接獲取不同操作系統下app的resource目錄，如果是window即 process.platform===’win32′
const path = require('path')
export function getAppResourcePath (filePath:string) {
if (process.platform === 'darwin' || process.platform === 'linux') {
if (process.env.NODE_ENV === 'development') {
return path.resolve('resources/' + filePath)
} else {
return path.join(__dirname, '..') + filePath
}
} else {
return path.resolve('resources/' + filePath)
}
}
使用setup語法時，需使用require(‘electron-edge-js’)引入，不可以使用import，否則會報 Syntax Error: TypeError: Cannot read property ‘content’ of null 而非 setup語法，則可以直接import
無邊框窗口
系統本身是帶有框架的，如果需要自定義框架，可以使用frameless 設置，如果需要使用自定義組件(比如 div.custom-frame-title)拖拽操作窗口時，需要給對應的元素增加樣式:
.custom-frame-title {
-webkit-user-select: none; // 此項防止與文本選擇沖突
-webkit-app-region: drag; // 此項為系統相應狀態欄
}
前後臺通知
import {ipcMain,ipcRenderer} from 'electron'
在electron中有很多可用api，其中最重要的是：ipcMain和ipcRenderer，用於ui進程和系統進程的通信。 在vue內使用ipcRenderer.on(‘eventname’) 接受系統發來的消息，用ipcRenderer.send(‘eventname’) 發送通知給系統，同樣ipcMain可以在主線程使用。
ipc通常結合自定義標題欄完成以下操作，或者其他需要操作窗口本身的事件
win.minimize() //最小化窗口 win.maximize() //最大化窗口 win.close() //關閉窗口 win.hide() //隱藏窗口
寫在最後
其他方式就和常規的vue開發無異，關於系統和ui的交互需要多翻閱api文檔 文檔地址
到此這篇關於vue3+electron12+dll開發客戶端配置詳解的文章就介紹到這瞭,更多相關vue3+electron12+dll客戶端配置內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！
推薦閱讀：
- vue + electron應用文件讀寫操作
- vue轉electron項目及解決使用fs報錯:Module not found: Error: Can't resolve 'fs' in
- Electron進程間通信的實現
- electron創建新窗口模態框並實現主進程傳值給子進程
- 聊聊vue番茄鐘與electron 打包問題