Comment développer la configuration client avec vue3+electron12+dll

Modifier la source de l'entrepôt

En raison de l'inconnu de la version électronique, il peut arriver que le serveur soit disponible et qu'un écran blanc s'ouvre après la construction, il doit donc être traité avec prudence. Il est préférable de valider une version lorsqu'elle est disponible pour faciliter la restauration du code. Si quelqu'un a de meilleures informations, il aimerait les partager.

Avant de démarrer la configuration, vous pouvez modifier légèrement les fichiers rc de Yarn et NPM. Utilisez des commandes ou des fichiers pour modifier directement .npmrc ou .yarnrc. Ces deux fichiers de configuration globaux se trouvent généralement dans le dossier C:user de votre compte actuel. , ou créez un nouveau fichier rc de commande de fichier sous le projet en cours pour modifier localement la configuration.
Étant donné que le téléchargement d'électrons échouera en raison de problèmes de réseau, il est remplacé par la source Taobao, la source Huawei peut également être utilisée.

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/

Dans le processus d'installation, utilisez vue create pour sélectionner la version vue3, entrez dans le répertoire du projet, ajoutez vue electronic-builder pour configurer electronic et sélectionnez la version actuelle 12.

Démarrage

La commande de démarrage correspondante a été assemblée dans package.json

• Utilisez npm run electronic:serve pour démarrer le développement

• npm run electronic:build pour compiler et empaqueter pour la production

. Remplacez vue- devtools

Le src/background.ts sous le projet est le répertoire de démarrage d'Electron. Dans l'environnement de développement, les situations suivantes se produiront où le temps d'attente de démarrage est long

Lancement d'Electron...
Échec de la récupération de l'extension, tentative 4 fois supplémentaire
Échec de la récupération de l'extension, tentative 3 fois supplémentaires
Échec de la récupération de l'extension, tentative 2 fois supplémentaires
Échec de la récupération de l'extension, tentative 1 fois supplémentaire

est dû au fait que le projet doit être connecté sur le Google Store pour télécharger et charger vue-devtools.

J'ai essayé de nombreuses façons de charger les outils, mais toutes ont échoué. La méthode temporaire est donc la suivante : supprimer les outils. Le code est trouvé, supprimez simplement 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()
})

J'ai déjà essayé de nombreuses méthodes mais cela n'a pas fonctionné. Plus tard, j'ai soigneusement comparé ce qui suit et j'ai trouvé quelques problèmes.

La version vue3 est différente de la version vue2 de vue-devtools, donc les outils de développement de vue2 ne peuvent pas être utilisés par vue3. Par conséquent, vous devez télécharger les outils de développement correspondant à vue3. La dernière version de vue2 est la 5.x, tandis que la version de vue3 est la version bêta 6.x. Cette version du plugin peut être téléchargée via crx4chrome. Décompressez le crx téléchargé, puis copiez-le dans le répertoire racine du projet. Utilisez le chargement de session pour remplacer la partie d'origine wait installExtension (VUEJS_DEVTOOLS) par

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

Après avoir démarré le projet, vous pouvez afficher l'extension vue. Pour

(nœud : 5904) ExtensionLoadWarning : avertissements lors du chargement de l'extension sur E:scanvue3_electronljjemllljcmogpfapbkkighbhhppjdbg-6.0.0-beta-13-Crx4Chrome.com :
Clé manifeste non reconnue 'browser_action'.
Clé manifeste non reconnue 'update_ url'.
Autorisation « contextMenus » est inconnu ou le modèle d'URL est mal formé.
Impossible de charger l'extension avec le nom de fichier ou de répertoire _metadata. Les noms de fichiers commençant par « _ » sont réservés à l'utilisation par le système. pour montrer où l'avertissement a été créé)

Vous pouvez l'ignorer. Si vous ne voulez pas voir d'invites ennuyeuses, vous pouvez supprimer le contenu correspondant aux invites dans le fichier manifest.json de tools

Notes

ne peut pas être utilisée

Lors de l'utilisation de la configuration du script en tant que module, l'étape de service peut être utilisée normalement, mais après la construction, le composant n'est pas chargé, la page est vide et aucune erreur n'est signalée. La raison est inconnue

Utilisation d'électron-edge-js pour le chargement. le fichier dll développé par c#, le processus de configuration est légèrement fastidieux et il a fallu 2 jours pour trouver la réponse, mais tout a échoué, voici la solution, vous devez prendre le bon médicament

Les Dll développées en c++ et c# utilisent différentes chargeurs, et c++ utilise ffi-napi.

L'utilisation de Edge nécessite l'ajout de trois configurations en même temps

Lorsque rien n'est configuré, une erreur Uncaught (in promise) : Impossible de trouver le module '...node_moduleselectrondistresourceselectron.asarrenderernativewin32x6414.16.0edge_nativeclr' se produira à ce moment-là. doit être Le fichier .config.js est ajouté. S'il n'y a pas de fichier de configuration, il doit être créé au même niveau que package.json.

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

Lorsque la configuration n'est pas activée, vous ne pouvez pas utiliser les variables intégrées de nodejs telles que __dirname __filename

Uncaught (promis) ReferenceError : __dirname n'est pas défini Vous devez d'abord configurer une nouvelle fenêtre de navigateur

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

Une fois la configuration ci-dessus terminée terminé, Uncaught (promis) sera signalé) TypeError : fs.existsSync n'est pas une fonction

Pour le moment, vous devez continuer à ajouter des éléments de configuration de vue.config.js

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

Si vous configurez cet élément séparément, mais n'activez pas nodeIntegration : vrai pour le nouveau BrowserWindow, Uncaught ReferenceError se produira : require n'est pas défini

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

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!