Bagaimana untuk membangunkan konfigurasi pelanggan dengan vue3+electron12+dll

Ubah suai sumber gudang

Disebabkan versi elektron tidak diketahui, mungkin terdapat situasi di mana servis tersedia dan skrin putih terbuka selepas pembinaan, jadi ia perlu dirawat dengan berhati-hati. Adalah lebih baik untuk membuat versi apabila ia tersedia untuk memudahkan pemulangan kod Jika sesiapa mempunyai maklumat yang lebih baik, mereka ingin berkongsinya.

Sebelum memulakan konfigurasi, anda boleh mengubah suai sedikit fail rc yarn dan npm Gunakan arahan atau fail untuk mengubah suai terus .npmrc atau .yarnrc Kedua-dua fail konfigurasi global ini biasanya dalam C:user akaun semasa anda Dalam folder ini, atau cipta fail rc perintah fail baharu di bawah projek semasa untuk menukar konfigurasi secara setempat.
Disebabkan muat turun elektron akan gagal kerana masalah rangkaian, ia ditukar kepada sumber Taobao, sumber Huawei juga boleh digunakan.

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/

Semasa proses pemasangan, gunakan vue create versi 12.

Mula

Arahan permulaan yang sepadan telah dipasang dalam package.json

• Gunakan npm run electron:serve untuk memulakan pembangunan<.>

• npm run electron:build Compile and package production

Ganti vue-devtools

Projek projek di bawah src/ background .ts ialah direktori permulaan elektron Dalam persekitaran pembangunan, situasi berikut mungkin berlaku di mana masa menunggu permulaan adalah lama

Melancarkan Elektron...

Gagal mengambil sambungan, mencuba. 4 kali lagi
Gagal mengambil sambungan, mencuba 3 kali lagi
Gagal mengambil sambungan, mencuba 2 kali lagi
Gagal mengambil sambungan, mencuba 1 kali lagi

adalah kerana projek itu perlu disambungkan ke Google Store untuk memuat turun Dan gagal memuatkan vue-devtools.

Saya mencuba pelbagai cara untuk memuatkan alatan tetapi semuanya gagal, jadi kaedah sementara ialah mengalih keluar alatan. Kod ditemui, hanya alih keluar 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()
})

Saya telah mencuba banyak kaedah sebelum ini tetapi ia tidak berjaya. Kemudian, saya membandingkan dengan teliti perkara berikut dan mendapati beberapa masalah.

Vue3 adalah berbeza daripada versi vue2 vue-devtools, jadi alat dev vue2 tidak boleh digunakan oleh vue3. Oleh itu, anda perlu memuat turun alatan pembangunan yang sepadan dengan vue3. Versi terbaharu vue2 ialah 5.x, manakala versi vue3 ialah versi beta 6.x. Versi pemalam ini boleh dimuat turun melalui crx4chrome. Nyahzip crx yang dimuat turun, dan kemudian salin ke direktori akar projek Gunakan pemuatan sesi untuk menggantikan bahagian installExtension(VUEJS_DEVTOOLS) asal dengan

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()
})

Selepas memulakan projek, anda boleh melihat sambungan vue. Untuk

(node: 5904) ExtensionWarning: Amaran memuatkan lanjutan di E: scanvue3_electrjjemllljcmogpfapbkkgkghbhpjdbg-6.0-beta-crx4Chrom.com. Kunci manifes 'update_url' tidak dikenali.

Kebenaran 'contextMenus' tidak diketahui atau corak URL salah bentuk.
Tidak boleh memuatkan sambungan dengan nama fail atau direktori _metadata Nama fail yang bermula dengan "_" dikhaskan untuk digunakan oleh sistem.
(Gunakan `electron --trace-warnings ...` untuk menunjukkan tempat amaran itu dibuat)


Boleh diabaikan. Jika anda tidak mahu melihat gesaan yang menjengkelkan, anda boleh memadamkan kandungan yang sepadan dengan gesaan dalam manifes.json alat

Nota

digunakan

Apabila menggunakan persediaan skrip sebagai modul, ia boleh digunakan seperti biasa semasa fasa servis, tetapi selepas binaan komponen tidak dimuatkan, halaman kelihatan kosong dan tiada ralat dilaporkan , sebabnya tidak diketahui

Gunakan electron-edge-js memuatkan fail dll yang dibangunkan oleh c# Proses konfigurasi agak menyusahkan saya mencari jawapan, tetapi tidak berjaya berikut adalah penyelesaiannya. Anda perlu mengambil ubat yang betul

dll yang dibangunkan oleh c++ dan c# Gunakan pemuat yang berbeza, c++ menggunakan ffi-napi.

Menggunakan edge memerlukan penambahan tiga konfigurasi pada masa yang sama

Apabila tiada konfigurasi, Uncaught (in promise) Ralat: Tidak dapat mencari modul '... node_moduleselectrondistresourceselectron. asarrenderernativewin32x6414.16.0edge_nativeclr' perlu ditambahkan pada fail vue.config.js pada masa ini Jika tiada fail konfigurasi, ia perlu dibuat pada tahap yang sama seperti package.json.

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

Apabila konfigurasi tidak didayakan, pembolehubah terbina dalam nodejs seperti __dirname __filename tidak boleh digunakan
Uncaught (in promise) ReferenceError: __dirname is not definition Mula-mula anda perlu mengkonfigurasi BrowserWindow baharu

{      
    // 如果使用到nodejs的api，则打包时需要将此设置为true
    nodeIntegration: true,
    // 同时，需要设置此项为false
    // 未设置时报 Uncaught ReferenceError: require is not defined
    contextIsolation: false  
}

Selepas konfigurasi di atas selesai, Uncaught (dalam janji) TypeError: fs.existsSync bukan fungsi
Pada masa ini, anda perlu terus menambah item konfigurasi vue.config.js

module.exports = {
    pluginOptions: {
        electronBuilder: {
            externals: ['electron-edge-js'],
            // 此处同样需要开启，将会在编译阶段将引用关系写入
            nodeIntegration: true, 
        }
    }
}

Jika anda mengkonfigurasi item ini secara berasingan , tetapi nodeIntegration: true of new BrowserWindow tidak didayakan, Uncaught ReferenceError: require is not definition
akan berlaku.

此外，对于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() //隐藏窗口

Atas ialah kandungan terperinci Bagaimana untuk membangunkan konfigurasi pelanggan dengan vue3+electron12+dll. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!