vue2使用electron以及打包配置

1.创建项目

vue create vue-project

2.安装electron

vue add electron-builder

会自动安装相关依赖

安装成功后会在src下自动生成一个background.js文件就是相应的electron的配置信息

'use strict'

import { app, protocol, BrowserWindow } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
const isDevelopment = process.env.NODE_ENV !== 'production'

// 在应用程序准备就绪之前，必须注册方案
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])

async function createWindow() {
  // 创建浏览器窗口。
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION//是否隔离渲染进程和主进程
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // 如果处于开发模式，则加载开发服务器的url
    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) win.webContents.openDevTools()
  } else {
    createProtocol('app')
    //未开发时加载index.html
    win.loadURL('app://./index.html')
  }
}

// 关闭所有窗口后退出。
app.on('window-all-closed', () => {
  //在macOS上，应用程序及其菜单栏很常见
  // 保持活动状态，直到用户使用Cmd+Q明确退出
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// 此方法将在Electron完成后调用
// 初始化，并准备创建浏览器窗口。
// 某些API只能在此事件发生后使用。
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // 安装 DevTools
    try {
      await installExtension(VUEJS_DEVTOOLS)
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

// 在开发模式下，应父进程的请求干净地退出。
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

以及package.json中的scripts中也会多出了几种运行或打包的命令

运行项目：

npm run electron:serve

此时运行项目没有报错但是启的很慢

将background.js中的这段代码注释掉就可解决启动慢的问题

以上是创建项目以及最基本配置 

下面讲讲常用配置以及打包相关配置

background.js里设置常用配置：通信、系统图标.......更多相关api可参考之前文章https://blog.csdn.net/m0_63701303/article/details/128683563

'use strict'
// app:控制应用程序的事件生命周期
// protocol:注册自定义协议并拦截基于现有协议的请求。
// BrowserWindow:创建和控制浏览器窗口（应用程序窗口）
// Tray:添加图标和上下文菜单到系统通知区
// Menu:创建原生应用菜单和上下文菜单。
//screen: 检索有关屏幕大小、显示器、光标位置等的信息
// ipcMain:从主进程到渲染进程的异步通信。
import { app, protocol, BrowserWindow, Tray, Menu, screen, ipcMain } from 'electron'
import { createProtocol } from 'vue-cli-plugin-electron-builder/lib'
const isDevelopment = process.env.NODE_ENV !== 'production'

// 在应用程序准备就绪之前，必须注册方案
protocol.registerSchemesAsPrivileged([
  { scheme: 'app', privileges: { secure: true, standard: true } }
])
//程序主窗口
let mainWindow = null;
async function createWindow() {
  let {
    width,
    height
  } = screen.getPrimaryDisplay().workArea;//自定义最大化窗口
  // 创建浏览器窗口。
  mainWindow = new BrowserWindow({
    width: width,
    height: height,
    webPreferences: {
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION//是否隔离渲染进程和主进程
    }
  })

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // 如果处于开发模式，则加载开发服务器的url
    await mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
    if (!process.env.IS_TEST) mainWindow.webContents.openDevTools()
  } else {
    createProtocol('app')
    //未开发时加载index.html
    mainWindow.loadURL('app://./index.html')
  }
}
let path = require('path')
var iconPath = path.join(__dirname, '../public/favicon.ico');
if (!isDevelopment) { //如果是生产环境
  iconPath = path.join(__dirname, './favicon.ico');
}
// 设置托盘区菜单
var appTray = null
function setTray() {
  //设置菜单内容
  let trayMenu = [{
    label: '退出', //菜单名称
    click: function () { //点击事件
      app.quit();
    }
  }];
  // s
  //设置托盘区图标
  // let trayIcon = path.join(__dirname, '../public/favicon.ico');
  appTray = new Tray(iconPath);
  //设置菜单
  const contextMenu = Menu.buildFromTemplate(trayMenu);
  //设置悬浮提示
  appTray.setToolTip('xxxx系统');
  //设置
  appTray.setContextMenu(contextMenu);
  //点击图标
  appTray.on('click', function () {
    //显示主程序
    mainWindow.show();
  });
}
// on注册事件  send触发 
//ipcMain 通信模块
function addIpc() {

}
// 关闭所有窗口后退出。
app.on('window-all-closed', () => {
  //在macOS上，应用程序及其菜单栏很常见
  // 保持活动状态，直到用户使用Cmd+Q明确退出
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) createWindow()
})

// 此方法将在Electron完成后调用
// 初始化，并准备创建浏览器窗口。
// 某些API只能在此事件发生后使用。
app.on('ready', async () => {
  // if (isDevelopment && !process.env.IS_TEST) {
  //   // 安装 DevTools
  //   try {
  //     await installExtension(VUEJS_DEVTOOLS)
  //   } catch (e) {
  //     console.error('Vue Devtools failed to install:', e.toString())
  //   }
  // }
  createWindow()
  setTray() //系统图表
  addIpc() //通信

})

// 在开发模式下，应父进程的请求干净地退出。
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit()
      }
    })
  } else {
    process.on('SIGTERM', () => {
      app.quit()
    })
  }
}

打包配置：创建vue.config.js


module.exports = {
    publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
    pages: {
        index: {
            // page 的入口
            entry: 'src/main.js',
            // 模板来源就是在public里面创建的入口文件名
            template: 'public/index.html',
            // 编译后在 dist文件夹中的输出文件名，可选项，省略时默认与模块名一致
            filename: 'index.html',
            // 当使用 title 选项时，
            // template 中的 title 标签需要时 <title><%= htmlWebpackPlugin.options.title %></title>
            title: '主窗口',
            // 在这个页面中包含的块，默认情况下会包含
            // 提取出来的通用 chunk 和 vendor chunk。
            chunks: ['chunk-vendors', 'chunk-common', 'index']
        },
    },
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                "appId": "com.swpe.template",
                // "asarUnpack": [
                //     "./node_modules/java",
                //     "./node_modules/async",
                // ],
                "asar": "false",
                "productName": "template", //项目名，也是生成的安装文件名，即aDemo.exe
                "copyright": "Copyright © 2020", //版权信息
                "directories": {
                    "output": "./dist" //输出文件路径
                },
                "win": { //win相关配置
                    "icon": "./public/favicon.ico", //图标，当前图标在根目录下，注意这里有两个坑
                    "target": [{
                        "target": "nsis", //利用nsis制作安装程序
                        "arch": [
                            "x64", //64位
                            "ia32" //32位
                        ]
                    }]
                },
                "mac": {
                    "target": [
                        "dmg",
                        "zip"
                    ]
                },
                // "linux": {
                //     "icon": "./public/favicon.ico"
                // },
                "nsis": {
                    "oneClick": false, // 是否一键安装
                    "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
                    "allowToChangeInstallationDirectory": true, // 允许修改安装目录
                    "installerIcon": "./public/favicon.ico", // 安装图标
                    "uninstallerIcon": "./public/favicon.ico", //卸载图标
                    "installerHeaderIcon": "./public/favicon.ico", // 安装时头部图标
                    "createDesktopShortcut": true, // 创建桌面图标
                    "createStartMenuShortcut": true, // 创建开始菜单图标
                    "shortcutName": "demo", // 图标名称
                },
            }
        }
    }
}

运行npm run electron：build

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/327773.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

缓存和数据库一致性

缓存和数据库一致性

前言&#xff1a; 项目的难点是如何保证缓存和数据库的一致性。无论我们是先更新数据库&#xff0c;后更新缓存还是先更新数据库&#xff0c;然后删除缓存&#xff0c;在并发场景之下&#xff0c;仍然会存在数据不一致的情况&#xff08;也存在删除失败的情况&#xff0c;删除…
阅读更多...
Docker-Compose构建lnmp

Docker-Compose构建lnmp

目录 实验前准备安装composeNginx准备工作目录准备Dockerfile脚本准备nginx.conf Mysql准备工作目录编写Dockerfile脚本准备my.cnf PHP准备工作目录准备相关文件 编写docker-compose.yml配置文件目录结构启动测试Mysql授权测试 问题Mysql容器无权访问问题浏览器访问file not fo…
阅读更多...
计算机网络 网络安全

计算机网络 网络安全

网络安全 网络安全问题概述 计算机网络面临的女全性威胁 计算机网络的通信而临两大类威胁&#xff0c;即被动攻击和主动攻击 被动攻击是指攻击者从网络上窃听他人的通信内容。通常把这类攻击称为截获。在被动攻击中&#xff0c;攻击者只是观察和分析某一个协议数据单元 PDU…
阅读更多...
R语言【paleobioDB】——pbdb_orig_ext()：绘制随着时间变化而出现的新类群

R语言【paleobioDB】——pbdb_orig_ext()：绘制随着时间变化而出现的新类群

Package paleobioDB version 0.7.0 paleobioDB 包在2020年已经停止更新&#xff0c;该包依赖PBDB v1 API。 可以选择在Index of /src/contrib/Archive/paleobioDB (r-project.org)下载安装包后&#xff0c;执行本地安装。 Usage pbdb_orig_ext (data, rank, temporal_extent…
阅读更多...
各种版本对应关系：SpringCloudAlibaba——SpringCloud——SpringBoot——SpringFramework——JDK

各种版本对应关系：SpringCloudAlibaba——SpringCloud——SpringBoot——SpringFramework——JDK

SpringCloudAlibaba——SpringCloud——SpringBoot——SpringFramework——JDK 一般情况&#xff0c;在https://github.com/项目/wiki目录下有发布信息及对应的要求其他依赖的版本信息SpringCloudAlibaba——SpringCloud——SpringBootSpringBoot和SpringFramework的版本对应关…
阅读更多...
基于MATLAB计算无线通信覆盖（一）环境准备

基于MATLAB计算无线通信覆盖（一）环境准备

一、环境 MATLAB 2022b 注&#xff1a;开始仿真前需部署地理坐标区和地理图&#xff0c;最好采用第三种&#xff0c;直接把底图数据下载到本地&#xff0c;防止连接不上网络时只能显示darkwater的底图。 可用于地理坐标区和地理图的底图如下表所示 二、下载底图并安装 工具&…
阅读更多...
如何用GPT进行论文润色与改写？

如何用GPT进行论文润色与改写？

详情点击链接&#xff1a;如何用GPT/GPT4进行论文润色与改写&#xff1f;一OpenAI 1.最新大模型GPT-4 Turbo 2.最新发布的高级数据分析&#xff0c;AI画图&#xff0c;图像识别&#xff0c;文档API 3.GPT Store 4.从0到1创建自己的GPT应用 5. 模型Gemini以及大模型Claude2二…
阅读更多...
最新可用GPT-3.5、GPT-4、Midjourney绘画、DALL-E3文生图模型教程【宝藏级收藏】

最新可用GPT-3.5、GPT-4、Midjourney绘画、DALL-E3文生图模型教程【宝藏级收藏】

一、前言 ChatGPT3.5、GPT4.0、GPT语音对话、Midjourney绘画&#xff0c;文档对话总结DALL-E3文生图&#xff0c;相信对大家应该不感到陌生吧&#xff1f;简单来说&#xff0c;GPT-4技术比之前的GPT-3.5相对来说更加智能&#xff0c;会根据用户的要求生成多种内容甚至也可以和…
阅读更多...
极狐GitLab 线下『 DevOps专家训练营』成都站开班在即

极狐GitLab 线下『 DevOps专家训练营』成都站开班在即

成都机器人创新中心联合极狐(GitLab)隆重推出极狐GitLab DevOps系列认证培训课程。该课程主要面向使用极狐GitLab的DevOps工程师、安全审计人员、系统运维工程师、系统管理员、项目经理或项目管理人员&#xff0c;完成该课程后&#xff0c;学员将达到DevOps的专家级水平&#x…
阅读更多...
CentOs7.8安装原生Jenkins2.38教程

CentOs7.8安装原生Jenkins2.38教程

CentOs7.8安装Jenkins教程 前提&#xff1a;1、下载安装包2、安装&#xff1a;3、检验是否安装成功&#xff1a;4、查询java路径5、修改配置文件6、创建jenkins用户7、给jenkins用户授权8、开放防火墙端口9、运行和其他jenkins相关命令10、异常情况10.1 提示超时&#xff0c;查…
阅读更多...
DAG最小路径点覆盖，最小路径可重复覆盖，详解

DAG最小路径点覆盖，最小路径可重复覆盖，详解

文章目录 前言有向无环图的最小路径点覆盖概念拆点二分图定理**证明** 最小路径可重复覆盖解决策略代码实现 OJ练习 前言 关于二分图&#xff1a;二分图及染色法判定 关于二分图最大匹配&#xff1a;二分图最大匹配——匈牙利算法详解 关于二分图带权最大完备匹配&#xff1…
阅读更多...
NFS网络共享服务存储

NFS网络共享服务存储

目录 一、NFS简介 1、NFS定义&#xff1a; 2、NFS的特点 3、NFS的优缺点 4、NFS的原理图示 二、服务端NFS配置文件&#xff1a;/etc/exports 三、实验&#xff1a;NFS共享存储服务配置 1、服务端安装nfs-utils与rpcbind软件包 2、服务端新建共享文件夹目录并赋予权限 …
阅读更多...
前端（html+css+javascript）作业--展现家乡的网页

前端（html+css+javascript）作业--展现家乡的网页

期末期间&#xff0c;老师布置了前端作业&#xff0c;现在放到这里&#xff0c;给各位同志参考。 桂平市是广西壮族自治区的一个美丽的城市&#xff0c;拥有丰富的历史文化和自然景观&#xff0c;属于贵港市管辖&#xff0c;那为什么是看起来是市级而不是县级&#xff0c;其实他…
阅读更多...
HAL库配置RS485通信

HAL库配置RS485通信

在配置好串口的基础上完成RS485的配置 一、使能RS485的发送和接收模式引脚 __HAL_RCC_GPIOG_CLK_ENABLE();//高电平是发送模式&#xff0c;低电平是接收模式&#xff0c;默认是接收模式HAL_GPIO_WritePin(PG4_RS485_DIR1_Port, PG4_RS485_DIR1_Pin, GPIO_PIN_RESET);GPIO_Init…
阅读更多...
Java基础面试题（三）

Java基础面试题（三）

Java基础面试题&#xff08;三&#xff09; 文章目录 Java基础面试题&#xff08;三&#xff09;什么是字节码?采用字节码的好处是什么?为什么说 Java 语言“编译与解释并存”&#xff1f; 文章来自Java Guide 用于学习如有侵权&#xff0c;立即删除 什么是字节码?采用字节码…
阅读更多...
Qt命令行安装：linux（ubuntu）

Qt命令行安装：linux（ubuntu）

起因是我上一篇文章说的&#xff0c;官网下的安装包卡死在第一步安装界面了。 于是我就问GPT有没有纯命令行的安装方式&#xff0c;果然是有的。 在Ubuntu上安装Qt可以使用以下命令&#xff1a; 1. 首先&#xff0c;添加Qt的官方存储库到系统中&#xff1a; sudo add-apt-rep…
阅读更多...
在Ubuntu下载Python3.6 并建立软连接

在Ubuntu下载Python3.6 并建立软连接

打开终端&#xff0c;输入su root,进入root模式 su root为了避免权限问题 安装zlib1g-dev apt-get install zlib1g-dev1.然后创建目录 mkdir -p /usr/local/python32.进入python3目录 cd /usr/local/python33.从官网下载好python3.6.2 wget https://www.python.org/ftp/p…
阅读更多...
Qt QRubberBand 如何实现鼠标框选控件

Qt QRubberBand 如何实现鼠标框选控件

QRubberBand类提供了一个矩形或直线&#xff0c;可以指示选择或边界。常见的模式是结合鼠标事件来执行此操作。本文将使用框选QCheckBox控件&#xff0c;来演示QRubberBand是如何配合鼠标进行工作的。 一、RubberBand 框选效果图 二、RubberBand 代码 rubberband.h #ifndef …
阅读更多...
【ug572】UltraScale体系结构时钟资源手册节选

【ug572】UltraScale体系结构时钟资源手册节选

概述 时钟架构概述 The UltraScale architecture clocking resources manage complex and simple clocking requirements with dedicated global clocks distributed on clock routing and clock distribution resources. The clock management tiles (CMTs) provide clock f…
阅读更多...
经典目标检测YOLO系列(二)YOLOv2算法详解

经典目标检测YOLO系列(二)YOLOv2算法详解

经典目标检测YOLO系列(二)YOLOv2算法详解 YOLO-V1以完全端到端的模式实现达到实时水平的目标检测。但是&#xff0c;YOLO-V1为追求速度而牺牲了部分检测精度&#xff0c;在检测速度广受赞誉的同时&#xff0c;其检测精度也饱受诟病。正是由于这个原因&#xff0c;YOLO团队在20…
阅读更多...
最新文章

Copyright @ 2022~2023