Electron+vue 打包

最新推荐文章于 2025-10-24 14:22:33 发布

原创最新推荐文章于 2025-10-24 14:22:33 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

electron 专栏收录该内容

1 篇文章

订阅专栏

本文解决XML文件加载失败及router-view组件无法显示的问题，介绍将XML文件置于static目录并利用__static全局变量加载，同时指出使用type:hash解决router-view加载不出的方案。

xml文件加载失败：将xml文件放到static目录下，且加载的地方使用__static全局变量

router-view加载不出来：使用type:hash

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

R_Usk

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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

CMDN123456的博客

08-05

1万+

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

【electron + vue2】构建桌面端、打包。

2301_76692187的博客

10-29

6373

Electron 是一个使用 JavaScript, HTML 和 CSS 构建跨平台桌面应用程序的开源库。能够运行在 Windows、macOS 和 Linux 上。集成现代Web API：可以访问现代 Web API，如地理位置、通知等。复杂界面设计：利用 HTML 和 CSS 的强大功能，可以创建复杂的用户界面。插件和扩展：可以集成第三方插件和扩展，增强应用功能。像流行的【微软开发的免费、开源的代码编辑器。微软的团队协作平台。Notion】一个组织笔记、任务和项目的协作工具。

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

electron 如何打包vue项目

qwer8wqer的博客

05-15

779

vue项目打包桌面应用程序

VUE+Electron从0开始搭建开发环境

最新发布

robinfoxnan的专栏

10-24

1293

本文介绍了使用Node.js 20 LTS、Vue3和Electron构建全屏桌面应用的完整流程。主要内容包括：1）环境安装与配置；2）创建Vue3项目；3）集成Electron并配置全屏显示；4）修改package.json和vite配置；5）开发调试与打包发布。重点解决了全屏显示、打包配置、路径处理等关键问题，提供了可直接执行的命令流程和详细的文件配置示例。该方案可实现快速构建一个全屏显示的"Hello World"桌面应用，并打包为可执行程序。

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项目打包成.exe文件【保姆级教程】

heavenz19的博客

03-15

6156

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

精选资源

Electron+Vite+Vue3 模版

05-31

开发者可以利用Vue3的新特性构建用户界面，同时享受Vite带来的快速开发体验，最后通过Electron将应用打包为可在Windows、macOS和Linux上运行的桌面程序。在实际使用这个模版时，开发者可以按照以下步骤进行操作： ...

精选资源

Electron + Vue3 跨平台的桌面应用程序开发框架

06-19

使用Vue3+Electron+ElementPlus创建跨平台桌面系统 1.可以动态修改配置服务地址访问 2.打包后可以在安装程序中修改网站或者系统服务地址进行访问 3.可以进行拓展安装到各web平台系统中 4.可以拓展类似浏览器窗口

Electron + vue 打包桌面操作流程详解

10-16

在开发桌面应用时，Electron 和 Vue.js 的结合提供了一种强大的解决方案。本文将深入探讨如何使用这两个技术栈进行打包，以便创建桌面应用程序。...持续学习和实践，你将能更好地掌握Electron + Vue的打包技术。

精选资源

前端毕业设计大作业基于Electron+Vue构建的桌面音乐播放器源码.zip

06-15

期末大作业基于Electron+Vue构建的桌面音乐播放器源码。特性支持音乐频谱界面友好，支持皮肤切换跨平台，可打包Windows、Mac、Linux 良好的架构模式和代码风格提供支持主流的第三方音乐平台期末大作业基于...

electron + vue 打包桌面应用

weixin_67150280的博客

04-09

1368

1.下载打包所需依赖 npm i vue-cli-plugin-electron-builder npm i electron 2.运行npm run electron:build 3.生成dist_electron文件 4.安装exe应用即可！注意：路由模式需要调整为hash模式，不要使用cookie存储数据，应使用本地存储，或官方api ...

electron打包Vue前端

IT_Carter的博客

04-08

2436

electron-forge打包vue成exe

Electron-vue 成功打包全流程

mm_0123456789的博客

02-09

5431

electron-vue打包仅适用于windows系统文章目录electron-vue打包前言一、打包流程1. 安装electron自带打包插件2. 修改package.json文件3. 执行打包命令二、遇到的错误及解决方案1. electron包下载错误2. WinCodeSign下载3. nsis相关下载4. 再次执行打包操作4. 本地安装总结前言一、打包流程 1. 安装electron自带打包插件代码如下（示例）： npm install electron-builder 2. 修改p

Electron打包发布vue项目

haohan0307的博客

08-06

7030

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

Vue+Electron打包桌面应用(从零到一完整教程)_vue打包桌面应用

2501_90207531的博客

01-14

1654

打包后还是加载http://localhost:5173是无法运行的，因此，此处需要先用vite打包好，然后使用electron-builder加载vite打包后的文件进行打包。为了使vite和electron正常运行，需要先运行vite，使得其开发服务器的url可以正常访问，然后再开启electron去加载url。为了代码能够根据不同环境在运行时加载http://localhost:5173，在打包时加载文件，此处需要使用环境变量来切换生产和开发环境。即可，当修改项目文件时，桌面应用也将自动更新。

Vue+Electron打包桌面应用(从零到一完整教程)

weixin_68658847的博客

07-15

3766

Vue+Electron打包桌面应用(从零到一完整教程)

一步步使用electron把vue打包成客户端

weixin_47190975的博客

09-21

5332

一步步使用electron把vue打包成客户端

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

qq_34170840的博客

05-13

7840

一、设置国内镜像 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项目

weixin_30613433的博客

04-04

173

electron是什么 Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。 Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。快速开始electron 直接运行github上关于electron的构建工具 git clone...

electron + vue3 打包

01-18

### 使用 Electron 和 Vue3 打包项目的教程 #### 准备工作为了成功打包基于 Electron 和 Vue3 的应用，需先确保开发环境已配置好。这包括安装 Node.js 及 npm 或 yarn 来管理依赖项。 #### 安装依赖库根据提供的 `package.json` 文件中的版本信息[^2]，可以确认当前使用的 Vue 版本为 ^3.4.21 而 Electron 则是 ^31.0.0。对于这类项目来说，除了上述提到的核心组件外，还需要其他工具来辅助构建过程，比如 Vite 构建工具及其插件 @vitejs/plugin-vue 用于支持 Vue 单文件组件 (SFC)，以及 nodemon 实现自动重启服务等功能。 #### 配置 vite.config.ts 为了让 Vite 正确处理 Electron 应用程序，在根目录下创建或编辑现有的 `vite.config.ts` 文件： ```typescript import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [ vue(), ], server: { port: 8080, }, }) ``` 此配置指定了使用 Vue 插件并设置了本地服务器端口为 8080。 #### 修改 main.js/main.ts 在主进程中引入必要的模块，并设置窗口加载页面的方式如下所示： ```javascript const { app, BrowserWindow } = require('electron') const path = require('path') function createWindow () { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { preload: path.join(__dirname, 'preload.js'), contextIsolation: true, } }) win.loadURL(process.env.VITE_DEV_SERVER_URL !== undefined ? process.env.VITE_DEV_SERVER_URL : `file://${__dirname}/dist/index.html`) } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() }) ``` 这段代码定义了一个简单的浏览器窗口实例化函数createWindow() 并监听了两个事件：当所有窗口关闭时退出应用程序；如果是在 macOS 上，则重新打开一个新的窗口实例[^1]。 #### 编写 package.json 中的脚本命令最后一步就是在 `package.json` 添加一些有用的 NPM/Yarn 命令以便于日常操作： ```json { "scripts": { "serve": "vite", "build": "vite build", "electron:start": "electron ." } } ``` 这些命令分别对应启动开发服务器、编译生产版资源和运行电子应用本身的操作。通过以上步骤就可以实现一个基本可用的Electron与Vue3集成的应用框架搭建及打包流程。