electron打包vue项目

最新推荐文章于 2025-09-22 14:59:38 发布

原创

最新推荐文章于 2025-09-22 14:59:38 发布 · 492 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#postgresql #数据库 #database

本文详细介绍了如何使用electron-builder将Vue项目打包成exe应用程序，包括添加electron-builder、解决下载失败问题、运行和打包窗体以及解决运行时可能出现的白屏问题。在打包过程中，特别提到了修改vue-router的history模式来避免白屏现象。

Python微信订餐小程序课程视频

https://edu.youkuaiyun.com/course/detail/36074

Python实战量化交易理财系统

https://edu.youkuaiyun.com/course/detail/35475

创建项目

点击这里

添加electron-builder

1、在项目目录下运行命令：vue add electron-builder
2、electron-builder添加完成后会选择electron版本，直接选择最新版：

electron下载失败

vue add electron-builder下载electron会下载失败，使用淘宝镜像下载:cnpm i electron

窗体运行

1、下载完成后尝试运行electron窗体：npm run electron:serve

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

xuhss_com

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue配置electron，使用electron-builder进行打包【完整步骤】

CMDN123456的博客

08-05

1万+

vue配置electron，使用electron-builder进行打包【完整步骤】

electron打包部署vue项目

weixin_47617631的博客

11-26

948

但是这里有个坑，就是npm run serve 启动有界面效果，electron打包后启动是空白界面。下一步，克隆这个electron-quick-start ，借助他帮助我们转成electron.exe。进入im-web模块，cmd命令，npm install，npm run build。添加这两行：第一行是npm的镜像，第二行是electron镜像。my-app-name是打包生成的exe文件名字。

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

手把手教Electron+vue，打包vue项目，打包成桌面程序。

weixin_43816501的博客

05-22

2392

1.现如今前端框架数不胜数，尤其是angular、vue吸引一大批前端开发者，在这个高新技术快速崛起的时代，自然少不了各种框架的结合使用。接下来是介绍electron+vue的结合使用。 2.Electron是什么？？对于我来说Electron相当于一个浏览器的外壳，可以把网页程序嵌入到壳里面，可以运行在桌面上的一个程序，可以把网页打包成一个在桌面运行的程序，通俗来说就是软件，比如像...

Electron桌面应用打包实战：electron-packager与electron-builder详解

最新发布

weixin_31749299的博客

09-22

1833

Electron 是一个基于 Node.js 和 Chromium 的开源框架，允许开发者使用 HTML、CSS 和 JavaScript 构建跨平台的桌面应用程序。它将前端技术栈的能力扩展到桌面端，使得 Web 开发者可以轻松构建功能强大的原生级桌面应用。构建脚本是连接开发与发布的桥梁。合理的脚本设计不仅能简化操作，还能实现多环境分离与自动化触发。在的scripts字段中定义清晰的构建指令：参数说明：：指定目标平台。：指定 CPU 架构。--dir。

用electron将vue项目打包成.exe文件【保姆级教程】

heavenz19的博客

03-15

6141

说明： vue2项目，使用的vue-element-admin框架，用electron打包成.exe文件。

vue项目使用electron进行打包操作

qq_34170840的博客

05-13

7837

一、设置国内镜像 npm config edit 执行后会弹出npm的配置文档，将以下类容复制到文件末尾。 electron_mirror=https://npm.taobao.org/mirrors/electron/ electron-builder-binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/ 二、创建vue框架文件这里不详细说了，就是创建一个vue项目，如果已有项目则跳过这一步。

Electron打包发布vue项目

haohan0307的博客

08-06

7026

electron发打包布vue项目，electron自动更新

electron + vue 项目运行打包配置文档

01-08

vue-cli 初始化vue项目构建 vue init webpack project-name electron 配置源码： 1. git clone https://github.com/electron/electron-quick-start** 2. 找到clone下来的项目入口文件main.js 和 package.json 修改路径配置** main.js : 3. 在已建好vue-cli项目中，安装electron依赖：** npm install electron --save-dev npm install electron-packager --save-de

Electron打包vue 项目

08-22

要使用 Electron 打包 Vue 项目，可以按照以下步骤进行操作： ### 准备工作 1. 确保你的 Vue 项目已经创建完成，并且可以通过 `npm run serve` 正常运行。 2. 安装必要的依赖项，包括 Electron 和相关的构建工具。...

Electron桌面应用打包现有的vue项目

15年老码农，开源项目启航电商erp系统作者。

10-02

1716

如果您想打包成可执行文件，可以使用 Electron Builder 或 Electron Packager。Electron 中启动一个内置的 Node.js Web 服务器来渲染用 Vue.js 编写的页面，可以使用。确保在启动 Electron 应用之前，您已经构建了 Vue 应用（例如运行。方案二：手动下载electron对应的版本包，放在。在您的项目中创建一个新的文件，例如。文件夹，包含生产环境的静态文件。在主进程中，启动该服务器，并在。(直接将zip压缩包放进去)

使用 electron 把 vue 项目打包成客户端

Anorry的博客

12-09

880

为了使项目和electron正常运行，需要先运行项目，使得其开发服务器的url可以正常访问，然后再开启electron去加载url。打包成功后，会在根目录出现一个 dist_electron 文件夹，文件夹下会有一个 .exe 应用程序。在前面我们安装了 electron-builder 依赖，所以这里无需安装。新建一个vue项目，或者在已经写好的vue项目上操作。把下面代码，放到 package.json 内，与。安装失败的，可看另外一篇解决方法。配置基本路径 ./ 防止出现打包后打开页面空白。

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

shaoyahu的博客

04-15

1105

很想使用 electron 制作一个桌面应用，但是真的上手使用的时候才发现 electron 的坑实在是太多了先将遇到的坑记录在这里，遇到一个记录一个使用 9 以上版本的 vue-i18n 的项目打包成应用时会失败，本地运行没问题项目路径中有中文会打包失败和 electron 相关的插件版本更替实在是是太快，并且版本之间还不一定能兼容，所以这篇文章中使用到的插件都会写死版本来保证一定可以打包成功。

electron 如何打包vue项目

qwer8wqer的博客

05-15

778

vue项目打包桌面应用程序

electron-vue打包

avx0070的博客

08-28

574

electron和vue整合项目的打包方式：首先，打包方式不止这一种，我就说一下我打包成功的那种，嘻嘻~~ 1、全局安装electron-builder打包工具：npm install -gelectron-builder 2、在项目根目录下的package.json文件中配置打包相关信息：图中圈住部分是在windows下打包的配置，ia32代表生成的exe文件是3...

electron打包Vue前端

IT_Carter的博客

04-08

2436

electron-forge打包vue成exe

Electron打包Vue项目为Windows应用（.exe）

hyzhangjun的专栏

07-11

261

九、运行命令打包，然后项目中会出现一个文件夹，文件夹里面有一个App.exe文件，这个App.exe文件就是项目的启动文件。三、打包Vue项目，将打包出来的dist文件夹复制到electron-quick-start文件夹中。2、安装Node.js软件（node-v14.21.3-x64.msi）八、修改package.json文件，配置打包Exe所需参数。指定目标平台（例如win32、darwin、linux）。七、下载打包需要的依赖electron-packager。是打包后应用的名称。

2024年前端最全Vue+Electron打包桌面应用(从零到一完整教程)_vue打包桌面应用，超全Web前端中高级面试复习大纲

2401_84616230的博客

05-12

2250

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】“electron:build”: “vite build && electron-builder” // 新增打包命令。