将vue项目通过electron打包成windows可执行程序

news2025/1/23 17:50:44

将vue项目打包成windows可执行程序

1、准备好dist将整个项目打包

npm run build

2、安装electron依赖

npm install electron --save-dev
npm install electron-packager --save-dev
"electron": "^13.1.4",
"electron-packager": "^15.2.0"

在dist文件夹下面创建electron.js
electron.js内容如下:

const electron = require('electron')
const path = require('path')
const app = electron.app
const BrowserWindow = electron.BrowserWindow
const globalShortcut = electron.globalShortcut //快捷键

let mainWindow
const Menu = electron.Menu

function createWindow () {
 
    Menu.setApplicationMenu(null)
    // Create the browser window.
    mainWindow = new BrowserWindow({
        width: 980,
        height: 640
    })
 
    // and load the index.html of the app.
    mainWindow.loadFile('index.html')
 
    // Open the DevTools.
    // mainWindow.webContents.openDevTools()
 
    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
        mainWindow = null
    })
 
    // 通过快捷键就可以打开调试模式 ctrl + shift + l
    globalShortcut.register('CommandOrControl+Shift+L', () => {
        let focusWin = BrowserWindow.getFocusedWindow()
        focusWin && focusWin.toggleDevTools()
    })
}

app.on('ready', createWindow)
 
// Quit when all windows are closed.
app.on('window-all-closed', function () {
    if (process.platform !== 'darwin') app.quit()
})
 
app.on('activate', function () {
    if (mainWindow === null) createWindow()
})

在dist文件夹下面添加package.json文件内容如下:

{
    "name": "china_new1",
    "version": "2.0.0",
    "description": "A minimal Electron application",
    "main": "electron.js",
    "scripts": {
      "start": "electron ."
    },
    "repository": "https://github.com/electron/electron-quick-start",
    "keywords": [
      "Electron",
      "quick",
      "start",
      "tutorial",
      "demo"
    ],
    "author": "GitHub",
    "license": "CC0-1.0",
    "devDependencies": {
      "electron": "^6.0.12"
    }
  }

整个文件夹格式如下:

在这里插入图片描述
在跟目录添加命令

"electron_build": "electron-packager ./dist --platform=win32 --arch=x64 --overwrite"

执行打包命令

cnpm run electron_build

等待打包结果,打包出来为一下截图即为打包成功,双击china_new1.exe运行项目。
在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【Unity】坐标转换经纬度方法(应用篇)

【Unity】坐标转换经纬度方法(应用篇) 解决地图中经纬度坐标转换与unity坐标互转的问题。使用线性变换的方法,理论上可以解决小范围内所以坐标转换的问题。 之前有写过[Unity]坐标转换经纬度方法(原理篇),在实际使用中&#xff0c…

外卖福利来了,以后都10元以下了

扫最后面的二维码注册,收藏起来,是个网页 使用方法: 纯订单 不需要评价 消费反馈 需要上传评价的截图 没要求的最少一张照片 有要求的按要求 看清美团还是饿了么 不能夸平台 美团不能修好评价 饿了么可以改一下

linux学习(文件描述符)[12]

输出重定向 本质在OS内部&#xff0c;更改fd对应内容的指向 #include <stdio.h> #include <string.h> #include <unistd.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h>//myfile helloworld //int main(int argc,…

MySQL语法及常用数据类型

一、SQL语言概述 对数据库进行查询和修改操作的语言叫做SQL。SQL的含义就是结构化查询语言&#xff08;Structured Query Language&#xff09;。SQL包含以下4个部分&#xff1a; 1、数据定义语言&#xff08;DDL&#xff09;&#xff1a;DROP、CREATE、ALTER等语句&#xff…

这些选品神器,跨境卖家都在用

相信许多跨境电商商家至今不懂得如何选品&#xff0c;不会选&#xff1f;选什么类目&#xff1f;在哪选&#xff1f; 今天给大家整理一波实用选品工具&#xff0c;赶紧来码住。 1、TikTok 在国外流行着这么一句话:“TikTok mademe buyit”。 TikTok有超过 20亿的流量&#x…

ReentrantLock源码解析

定义 可重入锁&#xff0c;对于同一个线程可以重复获得此锁。分为FailLock和NonfairLock。 加锁就是将exclusiveOwnerThread设置为当前线程&#xff0c;且将status加一&#xff0c;解锁就status-1&#xff0c;且exclusiveOwnerThread设置为null。 公平锁&#xff1a;根据先来后…

C# Linq源码分析之Take (三)

概要 本文在前两篇Take源码分析的基础上&#xff0c;着重分析Range参数中有倒数的情况&#xff0c;即分析TakeRangeFromEndIterator的源码实现。 源码及分析 TakeRangeFromEndIterator方法用于处理Range中的开始和结束索引存在倒数的情况。该方法位于Take.cs文件中。通过yie…

Android4:约束布局

创建项目My Constraint Layout 一般创建项目之后activity_main.xml文件默认就是采用约束布局&#xff0c;如&#xff1a; <?xml version"1.0" encoding"utf-8"?> <androidx.constraintlayout.widget.ConstraintLayoutxmlns:android"http:…

FastDFS文件管理知识点+案例分析

一 介绍FastDFS 原理 FastDFS开源分布式文件系统由C语言编写实现, 可以通过专有API访问&#xff0c;目前提供了C、Java和PHP API。 FastDFS是一个开源的轻量级分布式文件系统&#xff0c;它对文件进行管理&#xff0c;功能包括&#xff1a;文件存储、文件同步、文件访问&#x…

scala中json4s 使用详解

预备知识 json4s的数据结构AST (Abstract Syntax Tree)。 sealed abstract class JValue case object JNothing extends JValue // zero for JValue case object JNull extends JValue case class JString(s: String) extends JValue case class JDouble(num: Double) extend…

企业需求如何精准对接科研院校科技成果?

一系列科技成果转化相关政策、法律法规的出台&#xff0c;正在破除高校科技成果转化机制上的桎梏。企业科技创新的需求也越来越大&#xff0c;也充分意识到与高校合作对于推动企业发展的重要性&#xff0c;对接科技成果的热情高涨&#xff0c;合作越来越频繁。但是也存在不成功…

SpringBoot 的 RedisTemplate、Redisson

一、Jedis、Lettuce、Redisson的简介 优先使用Lettuce&#xff0c; 需要分布式锁&#xff0c;分布式集合等分布式的高级特性&#xff0c;添加Redisson结合使用。 对于高并发&#xff0c;1000/s的并发&#xff0c;数据库可能由行锁变成表锁&#xff0c;性能下降会厉害。 1.1、…

linux中ubuntu安装hashcat方法以及使用GPU破解

一、linux安装hashcat git clone https://github.com/hashcat/hashcat.git make make install二、安装驱动 驱动版本安装大全&#xff1a;https://developer.nvidia.com/cuda-toolkit-archive 查看自己显卡选择对应的版本&#xff0c;根据下面命令无脑安装就行了 wget https:/…

誉天华为数通Datacom HCIE认证课程

作为当前网络领域最具含金量的认证之一&#xff0c;华为Datacom HCIE认证不仅是网络工程师们技术能力的证明&#xff0c;也是未来行业趋势的风向标。 尽管经历了几度版本更迭、考题变化&#xff0c;但是誉天一直紧跟技术发展趋势&#xff0c;在专业领域和教学内容上始终与当前的…

生成国密密钥对

在线生成国密密钥对 生成的密钥对要妥善保管&#xff0c;丢失是无法找回的。

奇迹MU服务端IGC架设流程

奇迹MU服务端IGC架设流程 大家好我是艾西&#xff0c;今天跟大家简单聊下奇迹IGC服务端。IGC端是国外的东西全英文大家感兴趣的话也可以自己研究研究&#xff0c;整体的东西还是非常完整。扩展以及端的稳定性还是非常不错的就是有点费脑子........&#xff08;此教程为个人娱乐…

WebStorm运行vue项目

WebStorm运行vue项目&#xff08;vue2&#xff09; 1.安装webstorm 2. 需要安装node.js 环境&#xff0c;可以去官网下载 https://nodejs.org/en 3. 安装完需要查看 按winr 输入cmd进入 输入命令node -v 和npm -v 查看&#xff0c;会出现相应的版本号,代表安装成功 vue官网安…

IC设计中主要的EDA工具有哪些? (内附EDA虚拟机安装资源)

EDA工具的使用涵盖了芯片的功能设计、综合、验证、物理设计等环节&#xff0c;更是被称作“芯片设计的工作母机”。下面就来为大家具体介绍一下常见的EDA工具。&#xff08;需要EDA虚拟机安装资源文末可领取~&#xff09; 什么是EDA&#xff1f; EDA是电子设计自动化&#xf…

对象存储服务-MinIO基本集成

是什么 MinIO 是一个高性能的分布式对象存储服务&#xff0c;适合存储非结构化数据&#xff0c;如图片&#xff0c;音频&#xff0c;视频&#xff0c;日志等。对象文件最大可以达到5TB。 安装启动 mkdir -p /usr/local/minio cd /usr/local/minio# 下载安装包 wget https:/…

NextJs - Error Handling (错误处理)

Error.js 的作用 使用 error.js 文件规则&#xff0c;可以优雅地处理嵌套路由中的意外运行时错误。 在 React Error Boundary 中自动封装路由段及其嵌套子段。 使用文件系统层次结构来调整粒度&#xff0c;为特定网段量身定制错误 UI。 将错误隔离到受影响的网段&#xff0…