怎么使用vue3+electron12+dll開發(fā)客戶端配置

今天小編給大家分享一下怎么使用vue3+electron12+dll開發(fā)客戶端配置的相關(guān)知識點，內(nèi)容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：空間域名、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設(shè)、汶上網(wǎng)站維護、網(wǎng)站推廣。

修改倉庫源

由于electron版本的未知性，可能存在serve可用而build之后打開白屏的情況，因此需要謹(jǐn)慎對待。最好在版本可用的情況下commit一個版本，方便代碼回滾，如果誰有更好的資料希望共享。

在開始配置前，可以將yarn和npm的rc文件稍作修改，使用命令或者文件直接修改.npmrc或者.yarnrc，這兩個全局配置文件一般在C:\user\你的當(dāng)前賬戶這個文件夾下，或者在當(dāng)前項目下新建文件命令rc文件以局部更改配置。
因為electron下載會因為網(wǎng)絡(luò)問題而失敗，因此修改為淘寶源，華為源亦可。

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版本，內(nèi)容創(chuàng)建后進入項目目錄，追加 vue electron-builder 配置electron，版本選擇當(dāng)前12版本。

啟動

在package.json中已經(jīng)裝配好對應(yīng)的啟動命令，

使用npm run electron:serve 開啟開發(fā)
npm run electron:build 編譯打包生產(chǎn)

更換vue-devtools

項目工程下 src/background.ts 為electron的啟動目錄，開發(fā)環(huán)境下會出現(xiàn)啟動等待時間較長的以下情況

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

是因為項目需要聯(lián)網(wǎng)谷歌商店下載并加載vue-devtools失敗導(dǎo)致。

嘗試了很多辦法加載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()
})

之前試了很多辦法，不可用。后來再仔細對照以下，發(fā)現(xiàn)了一些問題。

vue3的版本和vue2版本的vue-devtools已然不同，所以vue2的dev-tools并不能給vue3使用，因此，需要下載vue3對應(yīng)的開發(fā)工具。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中刪掉提示對應(yīng)的內(nèi)容

注意事項

當(dāng)使用script-setup作為模塊時，在serve階段可以正常使用，但是在build之后組件未加載，頁面呈現(xiàn)空白，且不報錯，原因未知

使用 electron-edge-js 加載 c# 開發(fā)的 dll 文件，配置過程略微繁瑣，花費2天時間尋求解答，但是均未果，以下是解決辦法，需要對癥下藥

c++和c#開發(fā)的dll使用不同的加載器，c++使用ffi-napi。

使用edge需要同時增加三處配置

當(dāng)什么都沒有配置時，將會發(fā)生 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同級創(chuàng)建。

module.exports = {
    pluginOptions: {
        electronBuilder: {
            externals: ['electron-edge-js']
        }
    }
}

當(dāng)配置未開啟時，將不能使用 __dirname __filename等nodejs內(nèi)置變量
Uncaught (in promise) ReferenceError: __dirname is not defined 首先需要配置 new BrowserWindow

{      
    // 如果使用到nodejs的api，則打包時需要將此設(shè)置為true
    nodeIntegration: true,
    // 同時，需要設(shè)置此項為false
    // 未設(shè)置時報 Uncaught ReferenceError: require is not defined
    contextIsolation: false  
}

以上配置完成后會報 Uncaught (in promise) TypeError: fs.existsSync is not a function
此時需要繼續(xù)增加 vue.config.js 的配置項

module.exports = {
    pluginOptions: {
        electronBuilder: {
            externals: ['electron-edge-js'],
            // 此處同樣需要開啟，將會在編譯階段將引用關(guān)系寫入
            nodeIntegration: true, 
        }
    }
}

如果單獨配置此項，但是并沒有開啟 new BrowserWindow的 nodeIntegration: true ,則會發(fā)生 Uncaught ReferenceError: require is not defined

此外，對于dll放置的文件夾，一般在項目根目錄創(chuàng)resources用于存放資源，并且項目打包過程中會不會直接打包資源目錄，所以需要增加資源配置，以防止出錯。對于文件的引用，在開發(fā)環(huán)境下，為當(dāng)前所看到的結(jié)構(gòu)，當(dāng)編譯打包后，為安裝目錄下resources目錄，所以生產(chǎn)和開發(fā)的引用文件存在一定區(qū)別，可以實驗后再看文件引用

 module.exports = {
     pluginOptions: {
         electronBuilder: {
             externals: ['electron-edge-js'],
             // 此處同樣需要開啟，將會在編譯階段將引用關(guān)系寫入
             nodeIntegration: true, 
             builderOptions:{
                 extraResources: {
                     // 拷貝靜態(tài)文件到指定位置，否則會提示文件找不到
                     from: 'resources/',
                     to: './'
                 },
             }
         }
     }
 }

提供文件獲取目錄方法，可以直接獲取不同操作系統(tǒng)下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

無邊框窗口

系統(tǒng)本身是帶有框架的，如果需要自定義框架，可以使用frameless 設(shè)置，如果需要使用自定義組件(比如 div.custom-frame-title)拖拽操作窗口時，需要給對應(yīng)的元素增加樣式:

 .custom-frame-title {
   -webkit-user-select: none; // 此項防止與文本選擇沖突
   -webkit-app-region: drag; // 此項為系統(tǒng)相應(yīng)狀態(tài)欄
 }

前后臺通知

import {ipcMain,ipcRenderer} from 'electron'

在electron中有很多可用api，其中最重要的是：ipcMain和ipcRenderer，用于ui進程和系統(tǒng)進程的通信。在vue內(nèi)使用ipcRenderer.on('eventname') 接受系統(tǒng)發(fā)來的消息，用ipcRenderer.send('eventname') 發(fā)送通知給系統(tǒng)，同樣ipcMain可以在主線程使用。

ipc通常結(jié)合自定義標(biāo)題欄完成以下操作，或者其他需要操作窗口本身的事件

win.minimize() //最小化窗口
win.maximize() //最大化窗口
win.close() //關(guān)閉窗口
win.hide() //隱藏窗口

以上就是“怎么使用vue3+electron12+dll開發(fā)客戶端配置”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學(xué)習(xí)更多的知識，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

分享名稱：怎么使用vue3+electron12+dll開發(fā)客戶端配置
轉(zhuǎn)載來于：http://bm7419.com/article0/iiohoo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供搜索引擎優(yōu)化、響應(yīng)式網(wǎng)站、關(guān)鍵詞優(yōu)化、網(wǎng)站制作、做網(wǎng)站、面包屑導(dǎo)航

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容