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) {// 如果处于开发模式,则加载开发服务器的urlawait win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)if (!process.env.IS_TEST) win.webContents.openDevTools()} else {createProtocol('app')//未开发时加载index.htmlwin.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) {// 安装 DevToolstry {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) {// 如果处于开发模式,则加载开发服务器的urlawait mainWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL)if (!process.env.IS_TEST) mainWindow.webContents.openDevTools()} else {createProtocol('app')//未开发时加载index.htmlmainWindow.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

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

如何安装“MySQL在虚拟机ubuntu”win10系统?

1、 更新列表 sudo apt-get update 2、 安装MySQL服务器 sudo apt-get install mysql-server 3、 安装MySQL客户端 sudo apt-get install mysql-client 4、 配置MySQL sudo mysql_secure_installation 5、 测试MySQL systemctl status mysql.service MySQL数据库基本…

【Docker】centos中及自定义镜像,并且上传阿里云仓库可提供使用

&#x1f389;&#x1f389;欢迎来到我的CSDN主页&#xff01;&#x1f389;&#x1f389; &#x1f3c5;我是平顶山大师&#xff0c;一个在CSDN分享笔记的博主。&#x1f4da;&#x1f4da; &#x1f31f;推荐给大家我的博客专栏《【Docker】centos中及自定义镜像&#xff0c;…

GRE隧道(初级VPN)配置步骤

一、拓朴图&#xff1a; 要求&#xff1a;1、PC1 和 PC2 能访问充当互联网接口地址的ISP环回口地址8.8.8.8 2、PC1 和 PC2 走GRE隧道互通 二、配置步骤&#xff1a; 1、配置IP 2、R1、R2 配置nat&#xff0c;代理内网地址通过G0/0/0口上外网 acl 2000rule permit source a…

Flutter首页框架搭建

1.下载flutter 2. 安装android 3.配置环境变量 关于环境搭建部分&#xff0c;哪天写一下&#xff0c;日志杂乱无章。 打开android studio 新建项目&#xff0c;选择flutter 新建文件夹创建 navigator和pages 文件夹下分别创建文件&#xff0c;tab_navigator.dart&#xff…

快速上手的 AI 工具-文心一言

简介 最近正打得火热的AIGC概念&#xff0c;相信大家肯定也都多少接触到了&#xff0c;那么AIGC概念股到底是什么呢&#xff1f;我个人最近也看了一些平台如&#xff1a;文心一言、通义千问、讯飞星火、豆包等等&#xff01;各位朋友也千万不要错过啦&#xff0c;真是各有各的特…

压缩编码之不同缩放参数对重建图像质量的影响的python实现——JPEG变换编码不同压缩率的模拟

原理 JPEG&#xff08;Joint Photographic Experts Group&#xff09;是一种常用的图像压缩标准&#xff0c;它通过采用离散余弦变换&#xff08;DCT&#xff09;和量化来实现图像的压缩。 离散余弦变换&#xff08;DCT&#xff09;&#xff1a; JPEG首先将图像分割成8x8的块…

跟着pink老师前端入门教程-day03

6. 表格标签 6.1 表格的主要作用 主要用于显示、展示数据&#xff0c;可以让数据显示的规整&#xff0c;可读性非常好&#xff0c;特别是后台展示数据时&#xff0c;能够熟练运用表格就显得很重要。 6.2 基本语法 <!--1. <table> </table> 是用于定义表格的标…

【图像分类】【深度学习】【轻量级网络】【Pytorch版本】EfficientNet_V1模型算法详解

【图像分类】【深度学习】【轻量级网络】【Pytorch版本】EfficientNet_V1模型算法详解 文章目录 【图像分类】【深度学习】【轻量级网络】【Pytorch版本】EfficientNet_V1模型算法详解前言EfficientNet_V1讲解问题辨析(Problem Formulation)缩放尺寸(Scaling Dimensions)复合缩…

生产力与生产关系 —— 浅析爱泼斯坦事件 之 弱电控制强电原理

据网络文字与视频资料&#xff0c;爱泼斯坦事件是犹太精英阶层&#xff0c;为了掌控美国国家机器为犹太利益集团服务&#xff0c;而精心设下的一个局。本文先假设这个结论成立&#xff0c;并基于此展开讨论。 我们知道&#xff0c;弱电管理强电是电气工程中的一门专门学问&…

135基于matlab的经验小波变换(EWT)的自适应信号处理方法

基于matlab的经验小波变换(EWT)的自适应信号处理方法.其核心思想是通过对信号的Fourier谱进行自适应划分,建立合适的小波滤波器组来提取信号不同的成分&#xff0c;EWT1D和EWT2D方法。程序已调通&#xff0c;可直接运行。 135matlab信号处理EWT (xiaohongshu.com)

HCIP之ISIS实验

华子目录 实验拓扑及要求规划IP地址规划Level1/2路由器实验步骤配置IP地址启动ISIS修改对应路由类型路由泄露&#xff1a;R1访问R5走R6测试 实验拓扑及要求 规划IP地址 规划Level1/2路由器 实验步骤 配置IP地址 R1-R8依次类推 [r1]int g0/0/0 [r1-GigabitEthernet0/0/0]ip a…

设计模式-- 3.适配器模式

适配器模式 将一个类的接口转换成客户希望的另外一个接口。使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 角色和职责 请求者&#xff08;client&#xff09;&#xff1a;客户端角色,需要使用适配器的对象&#xff0c;不需要关心适配器内部的实现&#xff0c;…

Redis:原理速成+项目实战——Redis企业级项目实战终结篇(HyperLogLog实现UV统计)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;Redis&#xff1a;原理速成项目实战——Redis实战14&#xff08;BitMap实现用户签到功能&#xff09; &#x1f4da;订阅专栏&am…

Overleaf Docker编译复现计划

Overleaf Docker编译复现计划 Overleaf Pro可以支持不同年份的Latex镜像自由选择编译&#xff0c;这实在是一个让人看了心痒痒的功能。但是很抱歉&#xff0c;这属于Pro付费功能。但是我研究了一下&#xff0c;发现其实和Docker编译相关的代码&#xff0c;社区版的很多代码都没…

ssm基于Java的药店药品信息管理系统的设计与实现论文

摘 要 传统信息的管理大部分依赖于管理人员的手工登记与管理&#xff0c;然而&#xff0c;随着近些年信息技术的迅猛发展&#xff0c;让许多比较老套的信息管理模式进行了更新迭代&#xff0c;药品信息因为其管理内容繁杂&#xff0c;管理数量繁多导致手工进行处理不能满足广大…

[学习笔记]刘知远团队大模型技术与交叉应用L1-NLPBig Model Basics

本节主要介绍NLP和大模型的基础知识。提及了词表示如何从one-hot发展到Word Embedding。语言模型如何从N-gram发展成预训练语言模型PLMs。然后介绍了大模型在NLP任务上的表现&#xff0c;以及它遵循的基本范式。最后介绍了本课程需要用到的编程环境和GPU服务器。 一篇NLP方向的…

ARM day4 汇编及硬件编程

一、指令--数据从内存到cpu--ldr、str load -- 加载 读 store -- 存储 写 在ARM 架构下&#xff0c; 数据从内存到cpu 直接的移动只能通过 LDR/STR来完成 mov 只能在寄存器之间移动数据 &#xff0c;或把立即数移动到寄存器 &#xff0c;并且数据长度不能超过 8 位 str …

FPGA 移位运算与乘法

题目&#xff1a; 已知d为一个8位数&#xff0c;请在每个时钟周期分别输出该数乘1/3/7/8,并输出一个信号通知此时刻输入的d有效&#xff08;d给出的信号的上升沿表示写入有效&#xff09; 由题意可知&#xff1a; 复位信号高有效&#xff0c;低复位&#xff1b;在inpu_grant上升…

C++基础1

一、形参带默认值的函数 二、inline内联函数 内联函数是一种在编译器处理时&#xff0c;将函数的实际代码插入到调用处的方法。通常&#xff0c;函数调用涉及一定的开销&#xff0c;包括保存和恢复调用现场、跳转到函数的代码位置等。而内联函数通过在调用处直接插入函数的代码…

MySQL-多表联合查询

&#x1f389;欢迎您来到我的MySQL基础复习专栏 ☆* o(≧▽≦)o *☆哈喽~我是小小恶斯法克&#x1f379; ✨博客主页&#xff1a;小小恶斯法克的博客 &#x1f388;该系列文章专栏&#xff1a;重拾MySQL &#x1f379;文章作者技术和水平很有限&#xff0c;如果文中出现错误&am…