vue项目打包成b端桌面应用，electron

最新推荐文章于 2025-10-02 03:26:59 发布

原创最新推荐文章于 2025-10-02 03:26:59 发布 · 333 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #electron #前端

本文指导如何将React项目与Electron结合，通过npm run build打包React应用，然后将dist文件放入Electron项目中，修改main.js加载dist/index.html。接着安装指定版本的Electron和electron-packager，运行npm run packager生成exe可执行文件。注意解决可能出现的依赖版本问题。

1.下载官网electron项目地址

git地址： git clone https://github.com/electron/electron-quick-start

2.将自己的项目npm run build打包

3.将dist文件放到electron项目一级目录下

4.找到main.js，设置：

mainWindow.loadFile('./dist/index.html')

5.npm run install，npm run serve

6.npm run packager 打成exe

注：如果报错请下载固定版本

"electron": "^19.0.8",

"electron-packager": "^15.5.1"

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

一个金牛座的前端

关注关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

利用Electron给Vue项目打包成exe文件

m0_73938805的博客

11-11

2085

但是当打包成dist文件夹后，再被electron渲染后它的路径会变成你当前项目的电脑主路径，我的项目在E盘，所以它的主路径就变成了E盘而不是什么public下面.....里面的内容就不演示了，这里虽然成功了，但用这种方法打包后处理有路径问题...在宝塔面板部署都不存在的问题，用了这个插件会出现，应该是插件本身的问题.最后启动项目预览当然是成功了，但是还没有结束，我们想要的是把当前vue项目打包成exe，但是还差最后一步，就是打包。因为我的项目是vue3的项目，所以我使用的脚手架设置路径。

独立开发者工具：electron-egg桌面软件开发框架

qq_32660241的博客

09-27

1820

独立开发者工具：electron-egg桌面软件开发框架

参与评论您还未登录，请先登录后发表或查看评论

vue-electron：一个带有vue-cli脚手架，常见Vue插件，electron-packagerelectron-builder，unite2e测试，vue-devtools和webpack的Electron＆Vue.js快速入门样板，Quasar1.xVuetify2.x SassLessStylus

01-31

:high_voltage: Vue电子样板具有vue-cli支持的Electron＆Vue.js快速入门样板资讯入门 # Install vue-cli and scaffold boilerplate $ npm install -g @vue/cli $ npm install -g @vue/cli-init $ vue init kdydesign/vue-electron my-project $ cd my-project $ npm install $ npm run dev 关于主要模块 vue-electron使核心依赖模块保持最新。 :red_heart_selector: 核心模组版电子 11.x Vue-CLI 3.x Vue 2.x 巴别塔 7.x :trident_emblem: CSS预处理器模组版萨斯 5.x 减 4.x 触控笔 0.54.x :white_medium_star: 构架模组版类星体 1.14.x 证明 2.4.x 执照版权所有（c）

3分钟上手Electron：vue-vben-admin桌面应用无缝集成指南

最新发布

gitblog_00561的博客

10-02

894

你是否还在为管理系统的跨平台部署烦恼？尝试过Web应用转桌面端却被复杂配置劝退？本文将带你用vue-vben-admin官方推荐的Electron集成方案，3步实现后台系统的桌面化改造，让你的管理系统同时拥有Web的灵活与桌面应用的原生体验。 ## 技术选型：为什么选择Electron？ Electron（电子）是由GitHub开发的开源框架，允许开发者使用HTML、CSS和JavaScrip...

2024年最全webstorm的安装及基本配置，2024最新物联网嵌入式开发高频精选面试题分享

2401_85015025的博客

05-14

701

择“License server”,然后在输入框中输入 License server address 为：http://hb5.s.osidea.cc:1017（有可能不能用，自己可以百度搜一下最新的）点击”Activate”按钮。人可以走的很快，但一群人才能走的更远！不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人**各种配置可以根据自己的需求自行配置。7、开始基本配置主要在。

把vue项目或者html项目打包成桌面应用的简单方法：使用electron-packager打包electron应用

南北极之间

07-08

2093

参考： https://blog.csdn.net/HRM2454/article/details/108070547 https://blog.csdn.net/ykee126/article/details/90752301 步骤： 1、全局安装electron及electron-packager 全局安装electron ; 全局安装electron-packager，用于打exe包 cnpm install electron -g cnpm install electron-packager -g

vue项目打包成electron桌面端exe应用（0-1保姆级教程）

qq_52132550的博客

07-15

6983

vue项目打包成桌面端exe应用（0-1保姆级教程）

前端+将vue项目打包为桌面应用+electron学习

04-15

内容概要:Electron是一个开源的框架，用于构建跨平台的桌面应用程序。它是由GitHub开发的，最初是为了构建...使用人群:学习Electron,将vue项目打包为桌面应用 内容关键词:vue,Electron 用途:将vue项目打包为桌面应用

【Python桌面应用开发】使用pywebview和pyinstaller将Vue项目打包成桌面端exe应用程序：从前端集成到打包部署全流程解析

08-20

内容概要：本文详细介绍了如何在不使用Electron的情况下，利用Python的pywebview和pyinstaller将Vue项目打包成桌面端应用程序。首先，文章阐述了环境搭建步骤，包括安装必要的Python包（如pywebview和pyinstaller）...

使用electron将vue项目打包成exe桌面应用

IT13333的博客

10-12

1155

使用electron 打包vue项目实现桌面应用 注：如果需要浏览器和桌面端同时运行：开发模式用打包工具的代理，编译后走file协议，设置electron允许跨域

使用 Electron将 Vue 项目打包为桌面应用（.exe）

qq_37577146的博客

03-07

658

这是核心的框架，用于构建跨平台的桌面应用程序，它结合了 Chromium 和 Node.js ，让你可以使用 HTML、CSS 和 JavaScript 来开发桌面应用。：它可以同时运行多个命令，在开发 Electron + Vue 项目时，常常会用来同时启动 Vue 开发服务器和 Electron 应用，方便进行开发调试。：用于将 Electron 应用打包成可执行文件，支持多种平台（如 Windows、Mac、Linux 等），可以生成安装包、便携版等不同形式的分发文件。

使用electron打包vue项目打包配置，打包exe文件和安转包

qq_42975676的博客

05-31

1822

桌面应用 vue electron

使用vue+electron打包客户端

杭州七先生的个人博客

04-08

481

npm下载下载地址：https://www.npmjs.com/get-npm 安装完之后输入 node -v npm -v 查看安装是否正常。设置镜像 npm config edit 将代码粘贴进去 electron_mirror=https://npm.taobao.org/mirrors/electron/ electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

electron-vue 用 electron-packager 打包的问题备忘

weixin_33882443的博客

09-13

1330

starskeeper 的开发渐入尾声，试着将其打包下，但是满屏的 error，记录下防止再次踏坑首先项目脚手架用的是 electron-vue 项目，在生成项目脚手架的时候会让你选择打包方式（electron-packager OR electron-builder），我选择的是前者查看项目的 package.json 文件，找到打包到 macOS 平台的命令 npm build build...

使用electron-packager electron-builder electron-updater 打包vue项目，支持在线更新

weixin_43816501的博客

06-18

549

1.如何用electron-packager electron-builder打包vue项目，打包成桌面程序。步骤一、执行npm run build 打包你的vue项目。打包成功后，生成dist打包后的文件。在dist打开命令行，安装electron-packager electron-builder 安装命令 npm installelectron...

Electron将Vue项目封装为本地应用

Joseph的博客

03-25

1359

一、问题描述公司开发了很久的web项目（Vue框架），由于打印问题，现在需要做成本地应用，所以需要将web应用转为本地应用（重新开发成本太高，老板也不同意的嘛），这个时候就想到了Electron开发桌面应用 二、Electron简介 Electron是由Github开发的开源框架，它允许开发者使用web技术构建平台的桌面应用。像VSCode、Atom、Slack都是使用Electron进行开发的 Electron的使用场景 1.没有专门的桌面应用开发人员，需要前端进行兼顾开发 2.一个应用同时

Web项目转换为Electron桌面应用程序

yuesongblog的专栏

03-13

1131

确保你已经在系统中安装了Node.js和npm（Node.js包管理器）。在VS Code中选择一个合适的文件夹，并在其中创建一个新的文件夹来存放你的Electron项目。这将启动Electron应用程序，并在Electron窗口中显示你在。在Electron项目中创建一个electron-builder。将打包后的文件拷贝到Electron项目文件夹的dist下。在项目文件夹中创建一个Electron的入口文件，例如。这将在你的项目中安装Electron并将其添加到。在Electron项目中创建一个。

Vue项目打包成exe的Electron应用指南

Vue项目负责前端界面和功能的实现，而Electron项目则提供将Vue项目打包成桌面应用程序的能力。打包过程大致可以分为以下几个步骤： 1. 创建Vue项目：首先，使用Vue CLI创建一个新的Vue项目。Vue CLI是官方提供的...