O projeto de front-end da Web usa o elétron para empacotar em um programa de desktop de plataforma cruzada (Windows)

O que é Elétron?

Electron é uma estrutura para criar aplicativos de desktop usando JavaScript, HTML e CSS. A incorporação do Chromium e do Node.js ao binário do Electron permite que você mantenha uma base de código JavaScript e crie aplicativos multiplataforma executados no macOS e no Linux, sem necessidade de experiência em desenvolvimento local.

começo rápido

Requisitos básicos de uso

Antes de desenvolver com o Electron, você precisa ter o Node.js instalado. Recomendamos que você use a versão LTS mais recente.
Verifique a versão do nó instalado localmente e a versão npm:

node -v
npm -v

O projeto front-end empacotado desta vez é desenvolvido usando vue, verifique a versão do vue

vue -V

Baixe um projeto de código aberto do github

Use Vue para desenvolver projetos de front-end da Web do lado do PC
(Angular, React, Vue ou HTML+CSS+JavaScript puro estão disponíveis)
use VSCode para abrir o projeto, execute npm install para baixar o pacote de dependência do projeto

npm install

Execute o script de inicialização para executar o projeto

Visualize o pacote package.json do projeto para visualizar o script

Execute npm run dev para iniciar o projeto

npm run dev

Erro de início:

• Motivo: o OpenSSL3.0 lançado pelo nó V17 possui restrições mais rígidas no algoritmo e tamanho da chave, e esse erro ocorrerá em versões posteriores ao nó V17 (inclusive)
• Solução: vontadeSET NODE_OPTIONS=–openssl-legacy-providerAdicione-o ao script vue em package.json. Se você só precisa iniciar o projeto, basta adicioná-lo antes do script de inicialização.
  
  Execute npm run dev novamente

npm run dev

Instalar pacote de dependência eletrônica

Antes da instalação:

{
    
    
  "name": "manage-desk",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    
    
    "dev": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build",
    "lint": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service lint"
  },
  "dependencies": {
    
    
    "@jiaminghi/data-view": "^2.3.8",
    "core-js": "^2.6.5",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    
    
    "@vue/cli-plugin-babel": "^3.11.0",
    "@vue/cli-plugin-eslint": "^3.11.0",
    "@vue/cli-service": "^3.11.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "less": "^3.0.4",
    "less-loader": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    
    
    "root": true,
    "env": {
    
    
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "@vue/standard"
    ],
    "rules": {
    
    },
    "parserOptions": {
    
    
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    
    
    "plugins": {
    
    
      "autoprefixer": {
    
    }
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

npm install --save-dev electron//只需要在开发环境安装即可

Escreva o arquivo de entrada eletrônica, configure o caminho do arquivo de entrada e o script de execução eletrônica em package.json

• Crie uma nova pasta eletrônica, crie o arquivo main.js como o arquivo de entrada, o nome do arquivo pode ser escrito livremente, basta especificar o campo principal em package.json

const {
    
     app, BrowserWindow } = require('electron');

// 该方法创建一个窗口
const createWindow = () => {
    
    
    // 初始化浏览器窗口设置参数
    const win = new BrowserWindow({
    
    
      width: 1500,
      height: 800,
      minWidth:1200,
      minHeight:600
    })
    // 加载页面
    win.loadURL('http://localhost:8080');
  }


//在 Electron 中，只有在 app 模块的 ready 事件被激发后才能创建浏览器窗口。您可以通过使用 app.whenReady() API来监听此事件。在whenReady()成功后调用createWindow()。
  app.whenReady().then(() => {
    
    
    createWindow()
    // 当 Linux 和 Windows 应用在没有窗口打开时退出了，macOS 应用通常即使在没有打开任何窗口的情况下也继续运行，并且在没有窗口可用的情况下激活应用时会打开新的窗口。
    // 为了实现这一特性，监听 app 模块的 activate 事件。如果没有任何浏览器窗口是打开的，则调用 createWindow() 方法。
    // 因为窗口无法在 ready 事件前创建，你应当在你的应用初始化后仅监听 activate 事件。 通过在您现有的 whenReady() 回调中附上您的事件监听器来完成这个操作。
    app.on('activate', () => {
    
    
      if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
  })
// 窗口全部关闭时执行退出APP
  app.on('window-all-closed', () => {
    
    
    // 虽然你现在可以打开一个浏览器窗口，但你还需要一些额外的模板代码使其看起来更像是各平台原生的。 应用程序窗口在每个OS下有不同的行为，Electron将在app中实现这些约定的责任交给开发者们。
    // 一般而言，你可以使用 进程 全局的 platform 属性来专门为某些操作系统运行代码。
    // 在Windows和Linux上，关闭所有窗口通常会完全退出一个应用程序。
    // 为了实现这一点，你需要监听 app 模块的 'window-all-closed' 事件。如果用户不是在 macOS(darwin) 上运行程序，则调用 app.quit()。
    if (process.platform !== 'darwin') app.quit()
    
    console.log("window-all-closed:窗口全部关闭，程序退出！");
  })

Inicie o script de elétrons e execute o aplicativo de elétrons

npm run start

O Electron abre uma janela independente, que é essencialmente uma janela do navegador. O Electron renderiza páginas da Web por meio do processo de renderização, executa main.js por meio do processo principal e entrega os códigos que interagem com a área local, como obter informações do dispositivo Bluetooth, ao processo principal para execução

. Uma frase é impressa durante o tempo de fechamento do monitoramento de todas as janelas:

Solução ilegível chinesa: modifique o script de inicialização do elétron

"start": "chcp 65001 && electron ."

Plataforma Windows de Empacotamento de Aplicativos

Instalar o construtor de elétrons

npm install electron-builder  --save-dev

Configuração de empacotamento de elétrons

Adicionar configuração de configuração de chave de nível superior de compilação em package.json

 //electron打包构建配置
 "build": {
    
    
    "copyright":"Copyright © 2023",
    "directories"
          "output":"./output-electron"//打包输出目录
    },
    "win":{
    
    //打包win程序包的配置
          "target": [
            {
    
    
                "target": "nsis",
                "arch": [
                   "x64" //打包64位包
                ]
            }
          ]
    },
    "nsis":{
    
    //打包成安装包的配置
        "oneClick":false,//设置不允许一键安装
        "allowToChangeInstallationDirectory":true //允许安装时选择安装目录
    }
  }

Adicione o script de empacotamento do construtor de elétrons em package.json

"pack": "electron-builder --dir",
"build-electron": "electron-builder  "

Compilação do projeto Vue

Escreva a configuração de compilação em vue.config.js e o arquivo será lido automaticamente quando o script vue for compilado

module.exports = {
    
    
  publicPath: process.env.NODE_ENV === 'production'? './': '/',//编译出来的文件使用相对路径可直接浏览器打开渲染，否则需要放在一个http服务器中解析
  outputDir:"dist",//打包输出目录
  assetsDir:"static",//静态资源存放目录

}

Execute o script de compilação vue

npm run build

Modifique o caminho da página da web de renderização da janela no arquivo de entrada eletrônica

Porque depois de ser empacotado em um programa executável de desktop, a página não é mais renderizada a partir do endereço de rede, mas os recursos html+css+JavaScript locais são renderizados

 win.loadFile(path.join(__dirname,"../",publicPath,outputDir,"index.html"));//Y因为main.js在electron文件夹中，所以需要../退出一级到根目录下再拼接路径

Defina para cancelar o diretório de menu padrão

const {
    
     app, BrowserWindow,Menu } = require('electron');
//取消窗口顶部菜单目录
Menu.setApplicationMenu(null);

Empacotamento de elétrons

Executar script de empacotamento eletrônico

npm run build-electron

instalar aplicativo

Selecione o diretório de instalação

executar programa