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

最新推荐文章于 2024-12-12 16:44:46 发布
最新推荐文章于 2024-12-12 16:44:46 发布
阅读量1.9k 收藏 3
点赞数 1
CC 4.0 BY-SA版权
分类专栏： vue electron exe桌面应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Shuanger112/article/details/103683590
本文档介绍了如何使用vue-cli初始化Vue项目，并结合Electron进行桌面应用开发。步骤包括：从GitHub克隆Electron快速启动项目，将其配置融入Vue CLI项目，安装 Electron 依赖，调整Vue配置，创建preload.js，打包Vue项目，并最终完成Electron应用的构建过程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

vue-cli 初始化vue项目构建

 vue init webpack project-name

electron 配置源码：

electron
1. git clone https://github.com/electron/electron-quick-start**

2. 找到clone下来的项目入口文件main.js 和 package.json 修改路径配置**

	main.js :

main
3. 在已建好vue-cli项目中，安装electron依赖：**

npm install electron --save-dev
npm install electron-packager --save-dev

4. 将修改后的mai

最低0.47元/天 解锁文章

200万优质内容无限畅学
VUE+electron环境配置
qq_45749482的博客
07-15 1320
vue+electron环境搭建
vue2+elementui+electron项目配置
06-06
在`vue2+elementui+electron`项目配置中，首先需要确保你已经安装了Node.js和npm，因为这两个是开发的基础环境。接下来，你需要初始化一个新的Vue2项目，可以使用Vue CLI或者手动配置。如果你选择Vue CLI，可以运行`...
Vue+Electron学习系列 (二) -- 打包发布
Bennett_G博客
09-17 2492
1️⃣Vue+Electron学习系列 (一) -- 初识2️⃣ Vue+Electron学习系列 (二) -- 打包发布3️⃣ Vue+Electron学习系列 (三) -- 自动更新4️⃣ Vue+Electron学习系列 (四) -- 自动更新进阶 问题1：cannot execute file does not exist 问题2：无效图标 invalid icon file......
Electron从头搭建打包Vue项目为桌面端应用(附打包报错解决)
weixin_47401153的博客
04-24 616
Electron从头搭建打包Vue项目为桌面端应用(附打包报错解决)
vue打包后仍可配置后端请求地址
baidu_41632421的博客
01-17 2481
前言: 公司项目一个内网, 一个外网, 每次改完都得打两个包. 前端后端都要小心翼翼, 生怕打包部署环节出现问题. 于是乎, 就想了一个快速解决办法. 原理及注意事项: 根目录public下的文件不会被打包, 但public文件夹好像和cli版本有关, 我的是2.9.6 采用请求的放方式读取文件, 不会有缓存 代码部分: public/config.json { "BASE_URL_DEV": "http://*********", ...
在vue项目中使用electron
Debug的博客
10-28 3101
然后将一些自己需要的选项勾选上（例如路由vuex等） 回车。npm run serve运行项目看看是否正常。在vue项目中新建vue.config.js。然后选择最新版本的electron。在项目终端输入以下代码进行安装。遇到选项后直接yes进行下一步。选择自定义安装 回车。等待项目创建完成后拖入编码器。然后选择2.x版本 回车。接下来几步一直回车就可以。选择最后一个 回车。双击应用程序进行安装。
electron+vite+vue+express+typescript项目
09-19
这个项目是一个使用现代前端技术和Node.js后端服务技术构建的跨平台桌面应用，它结合了Electron、Vite、Vue、Express和TypeScript，通过精心设计的目录结构和配置文件，实现了快速的开发流程和高效的项目管理。
Electron + vue 打包桌面操作流程详解
10-16
集成Vue和Electron的过程涉及到多个步骤，包括安装依赖、整合项目结构、配置文件的修改以及最后的打包。理解这些步骤对于成功创建桌面应用至关重要。如果你在过程中遇到任何问题，记得查阅文档或在线寻求帮助。记住...
【electron+vue】electron-vue-template使用笔记
qq_43691733的博客
04-24 723
注意，extensions 属性应仅包含文件扩展名而不带点号。name 属性是可选的，提供它有助于用户理解他们正在选择的文件类型。可以使用 filters 属性来指定对话框中可见的文件类型。要允许多个文件类型，则可以指定多个过滤器对象。Electron 提供了两个模块：ipcMain 和 ipcRenderer。
Electron-Vue 框架的构成拆解 & 动态 Webpcak 5 打包
最新发布
王森的博客
12-12 1382
在学习 Chromium 源码时发现，Electron 就相当于在 Chromium 源码的基础之上，又追加了 Node.js 的运行环境，并且使得 Node.js 和 Chromium 网页环境可以互相通信，互相取用各自的 API，形成了一个新的浏览器应用，也即 Electron 是 Chromium 浏览器的一个超集，而且 Electron 和 Chrome 内核的对应关系可能更为复杂，并不是很轻易就替换新的 Chromium 内核打造出来新的 Electron 衍生版本的。那是肯定可以执行的。
electron 打包_Vue3+Electron整合方式
weixin_39747087的博客
11-25 1319
教程源码：nofacer/vue3-electron​github.com之前写过一篇文章Vue结合Electron构建跨平台应用（TDD）。当时的方法后来发现了一个问题，就是打包后的应用拿到其他机子上没法用，原因在于index.html的地址是个绝对路径，在打包的时候就被固定下来了。 在查阅了许多资料后发现之前将二者结合的方法不是很有效(开发和生产环境不一致等)，正好Vue3也进入beta阶段...
vue2使用electron以及打包配置
m0_63701303的博客
01-15 3221
vue2使用electron以及打包配置
electron 最核心的2个配置文件，可以把任何网站VUE,uni-app项目变成桌面端exe
qq_40510461的博客
10-13 1101
先切换electron镜像防止下载中报错 npm config set registry https://registry.npm.taobao.org/ npm config set electron_mirror http://npm.taobao.org/mirrors/electron/ 下载相关插件 //安装electron 运行依赖 这是一个集成工具 npm install -g node-gyp npm install --global --production windo.
使用electron打包vue项目 打包配置，打包exe文件和安转包
qq_42975676的博客
05-31 1791
桌面应用 vue electron
Electron打包发布vue项目
haohan0307的博客
08-06 6940
electron发打包布vue项目，electron自动更新
用electron 打包发布集成vue2.0项目
浮萍的博客
10-08 2266
用electron 打包发布集成vue2.0项目element adimin 框架 步骤和踩坑记录
Electron+Vue+Webpack项目框架架构教程与源码
阿赛
03-01 3154
摘要：随着前端技术的飞速发展，越来越多的技术领域开始被前端工程师踏足。从NodeJs问世至今，各种前端工具脚手架、服务端框架层出不穷，“全栈工程师”对于前端开发者来说，再也不只是说说而已。在NodeJs及其衍生技术高速发展的同时，Nw和Electron的问世，更是为前端发展提速不少，依稀记得哪位前辈说过，“能用Js改写的，终将用Js改写”，这不，客户端来了！使用Electron也有一段时间了，各种...
electron打包vue-cli项目为桌面程序（二）：vue-cli创建webpack项目的目录详解
欢迎
07-05 965
1：使用vue-cli脚手架创建webpack项目成功后，需要了解项目目录结构和文件功能 2：文件夹介绍 build文件夹：webpack打包相关配置的文件夹 ------build.js文件：webpack打包配置文件 'use strict' // 本文件js使用严格模式 require('./check-versions')() // 检查npm和nodejs版本 proce...
Electron-Vue项目配置与打包桌面程序指南
知识点二：electron-vue打包注意事项 1. electron-builder是一个强大的工具，用于将electron应用程序打包成各种平台的安装包。 2. 打包过程中可能需要一些额外的配置，比如应用的图标、版本信息等，这些都可以在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值