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

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

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

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

(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

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!