El proyecto front-end web usa electron para empaquetar en un programa de escritorio multiplataforma (Windows)

¿Qué es el electrón?

Electron es un marco para crear aplicaciones de escritorio utilizando JavaScript, HTML y CSS. La incorporación de Chromium y Node.js en el binario Electron le permite mantener una base de código JavaScript y crear aplicaciones multiplataforma que se ejecutan en macOS y Linux, sin necesidad de experiencia en desarrollo local.

Inicio rápido

Requisitos básicos de uso

Antes de desarrollar con Electron, debe tener instalado Node.js. Le recomendamos que utilice la última versión de LTS.
Verifique la versión del nodo instalado localmente y la versión npm:

node -v
npm -v

El proyecto front-end empaquetado esta vez se desarrolla usando vue, verifique la versión de vue

vue -V

Descargar un proyecto de código abierto de github

Use Vue para desarrollar proyectos front-end web del lado de la PC
(Angular, React, Vue o HTML+CSS+JavaScript puro están todos disponibles)
use VSCode para abrir el proyecto, ejecute npm install para descargar el paquete de dependencia del proyecto

npm install

Ejecute el script de inicio para ejecutar el proyecto.

Vea el paquete del proyecto. paquete json para ver el script

Ejecute npm run dev para iniciar el proyecto

npm run dev

Error de inicio:

• Motivo: OpenSSL3.0 publicado por el nodo V17 tiene restricciones más estrictas sobre el algoritmo y el tamaño de la clave, y este error se producirá en versiones posteriores al nodo V17 (incluidas)
• Solución: voluntadSET NODE_OPTIONS=–openssl-heredado-proveedorAgréguelo al script vue en package.json. Si solo necesita iniciar el proyecto, solo necesita agregarlo antes del script de inicio.
  
  Ejecute npm run dev nuevamente

npm run dev

Instalar el paquete de dependencia de electrones

Antes de la instalación:

{
    
    
  "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//只需要在开发环境安装即可

Escriba el archivo de entrada de electrones, configure la ruta del archivo de entrada y el script de ejecución de electrones en package.json

• Cree una nueva carpeta de electrones, cree el archivo main.js como archivo de entrada, el nombre del archivo se puede escribir libremente, solo especifique el campo principal en 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 el script de electrones y ejecute la aplicación de electrones.

npm run start

Electron abre una ventana independiente, que es esencialmente una ventana del navegador. Electron procesa páginas web a través del proceso de procesamiento, ejecuta main.js a través del proceso principal y entrega los códigos que interactúan con el local, como obtener información del dispositivo Bluetooth, para el proceso principal para la ejecución

Se imprime una oración durante el tiempo de cierre del monitoreo de todas las ventanas:

Solución confusa china: modificar el script de inicio de electrones

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

Empaquetado de aplicaciones Plataforma Windows

Instalar generador de electrones

npm install electron-builder  --save-dev

Configuración de empaquetado de electrones

Agregue la configuración de compilación de configuración de clave de nivel superior en package.json

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

Agregue el script de empaquetado del generador de electrones en package.json

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

Compilación del proyecto Vue

Escriba la configuración de compilación en vue.config.js, y el archivo se leerá automáticamente cuando se compile el script vue

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

}

Ejecute el script de compilación vue

npm run build

Modifique la ruta de la página web de representación de la ventana en el archivo de entrada de electrones

Porque después de empaquetarse en un programa ejecutable de escritorio, la página ya no se procesa desde la dirección de red, sino que se procesan los recursos html+css+JavaScript locales.

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

Establecer para cancelar el directorio de menú predeterminado

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

embalaje de electrones

Ejecutar secuencia de comandos de empaquetado de electrones

npm run build-electron

instalar aplicación

Seleccione el directorio de instalación

ejecutar programa