将PC端（VUE）页面打包为桌面端应用

最新推荐文章于 2025-09-27 02:48:18 发布
原创 最新推荐文章于 2025-09-27 02:48:18 发布 · 1.4k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue #exe #app

本文介绍了如何将Vue页面打包为桌面应用，主要利用Electron框架。首先解释了Electron的基本原理，然后通过克隆测试项目逐步演示了从设置到运行、引入Vue项目、修改配置到最终打包成exe文件的详细步骤。在打包过程中遇到了问题，但经过解决后成功完成。

VUE学习

文章目录

前言

近来突发奇想怎么让vue页面不通过浏览器直接访问。本身相当于一个“实干家” 想到这个问题当即就去网上查阅了资料！electron

一、electron是什么？

Electron uses Chromium and Node.js so you can build your app with HTML, CSS, and JavaScript. Open Source Cross Platform Compatible with Mac, Windows, …

简单来说，electron是基于Chromium 和 Node.js 来构建一个跨平台应用的。Chromium是一个开源浏览器，与chrome区别是不会自动更新，但是一些新特性貌似会在Chromium先上。
资料就不做统计了（问度娘一抓一大把）

二、使用步骤

1.先测试

这边刚开始不敢直接进入vue项目实干（毕竟刚了解第一次用不 应该嗦怎么用都不知道），于是乎先clone了一个starter 来测试一下

git clone https://github.com
最低0.47元/天 解锁文章
vue项目打包成electron桌面端exe应用（0-1保姆级教程）
qq_52132550的博客
07-15 7010
vue项目打包成桌面端exe应用（0-1保姆级教程）
vue后台项目打包成桌面应用程序（.exe）
时漂亮的博客
08-29 2362
1、打包成功后的样子。
PakePlus完全指南：从安装到打包，打造你的专属桌面与移动应用
最新发布
gitblog_01129的博客
09-27 472
PakePlus是一款基于Rust的轻量级应用打包工具，能将任何网页或前端项目转换为仅5M大小的跨平台桌面和移动应用。本指南将带你完成从环境准备到应用发布的全流程，无需复杂开发经验，只需简单几步即可拥有专属应用。 ## 认识PakePlus PakePlus（简称PP）是基于Tauri2框架开发的多端应用打包工具，相比传统方案具有显著优势： - **极致轻量化**：打包后应用体积小于5M，远低...
将Vue项目代码打包成桌面应用
tianming2020的博客
12-17 907
参考 electron 官网 第一步： 安装Vue脚手架Vue CLI只能用最新版，建议在用官网最新命令行 npm install -g @vue/cli 第二步： 创建vue项目 vue create electron-app 第三步： 切换路径 cd electron-app 第四步： 安装electron-builder 过程中需要选择Electron版本，选择最新版即可。 vue add electron-builder 第五部： 运行项目 npm run electron:serv
把Vue项目打包为桌面应用(最简)
weixin_40521770的博客
09-17 9298
进入打包后的dist文件夹，其中x86、x64是不同系统的桌面应用，点击进入就会看到对应的exe文件。
2024年前端最全Vue+Electron打包桌面应用(从零到一完整教程)_vue打包桌面应用，超全Web前端中高级面试复习大纲
2401_84616230的博客
05-12 2246
本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点，以及我个人的学习方法、学习路线等，当然也整理了一些学习文档资料出来是给大家的。知识点涉及比较全面，包括但不限于前端基础，HTML，CSS，JavaScript，Vue，ES6，HTTP，浏览器，算法等等开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】“electron:build”: “vite build && electron-builder” // 新增打包命令。
vue项目打包成桌面版（vue-cli）
qq_39842563的博客
08-30 1058
tsp_components 地址 https://www.npmjs.com/package/tsp_components 账号 monstergaotsp_components 打开终端 输入命令link在目录C:\Users\用户名\AppData\Roaming\npm\node_modules下面 可查看包这就将这个公共的项目通过软连接的方式引入到项目里面来了 这时修改vue项目下面的任意代码都会实时生效，不用打包，也不用重启 生成lib文件夹 本地调试时使用 npm发布时使用 上传 修改
electron 将pc端（vue）页面打包为桌面端应用
热门推荐
j_bleach的博客
11-12 2万+
背景最近在学习RxJS，平时边看文档边顺手就敲一敲那些API，有时候想回顾一些自己写的东西，就要先把项目跑起来，这也难免有些麻烦。于是乎，就想着把自己写的这个小项目打包成桌面端，方面每次打开电脑就能看。经过网上查阅，比较成熟的解决方案很多，比如electron，nw.js等等。最终选定用electron，因为他的星星最多，哈哈。这个练手Rxjs的小项目是用vue跑的，之前没玩过vue，顺手玩一下。打
electron将vue项目打包为桌面端应用详解以及遇到的问题
Hero_rong的博客
03-10 1841
项目需求，vue项目本来是个pc端的，甲方要求可以在桌面直接打开，然后搜了一下，发现广发网友都推荐 electron ，立马打开官方文档，看似简单，没想到却走了很多弯路，所以有了这篇文章 有需要的可以先看下官方的文档 https://www.electronjs.org/docs 首先下载 electron 的依赖 装好之后可以electron-packager -v 检查一下是否安装成功，如果跳出版本号，那就是成了 npm install electron --sav...
Vue + JS + tauri 开发一个简单的PC端桌面应用程序
追梦&天空的博客
01-15 4208
Tauri是一款应用构建工具包，让您能够为使用 Web 技术的所有主流桌面操作系统构建软件。tauri 框架与 electron 非常相似。
eletron将vue打包成桌面应用（exe）
weixin_43575792的博客
07-14 1795
1.前期准备 两个项目： 第一个是自己用vue cli创建的项目（内容自行决定）; 第二个是去github将案例下载下来 案例地址 接着测试案例是否可以正常运行 # 进入项目 cd electron-quick-start # 安装依赖库 npm install # 运行应用 npm start 效果图如下 2.运行 首先要在自己的vue cli项目下的package.json 中scripts下添加2行 如下 "scripts": { "serve": "vue-cli-servi
vue项目打包成桌面程序
afggg_的博客
12-12 499
vue桌面程序打包
vue项目打包成桌面应用并修改图标
欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！
05-15 5833
回去看文件夹有可能会多一个副本exe可以删除，看到之前修改的exe文件的图标没有变，其实已经变了，可以选择重新启动电脑打开就会看到变了，或者你心里想这个就是你要的那种，直接打包给别人，别人看到就是修改之后的。html文件实际上不用修改就可以直接使用，但是我用过其他方式打包发现可以修改html文件，以后就不用再打包文件重新生成桌面应用，所以我做了修改。npm run dist //打包项目为 exe 文件。打包给别人是压缩外面那个包给别人，不是直接给exe文件。package.json 内容。
Vue项目打包为桌面应用
weixin_43764914的博客
09-08 1730
vue项目打包为桌面端
vue项目打包成.exe桌面应用
月兒~圓
05-30 1765
整理一下本人实现vue项目打包成桌面应用的流程 一、新建文件夹，使用git下载 # gitee git clone https://gitee.com/wallace5303/electron-egg.git # github git clone https://github.com/wallace5303/electron-egg.git 二、进入到electron-egg cd electron-egg-> npm install 三、把你的项目打包成dist文件，生成的dist文件把 el
vue项目打包到windows桌面端程序
m0_51469347的博客
05-08 1635
在一些企业中为了方便使用需要将前端项目打包到桌面端供人使用。所以查阅了网上的方法找到了并总结。使用的是Nativefier工具，是一个用户将任意网页转换为Windows桌面应用程序的工具。
将Vue项目打包为桌面应用 electron
故人两相忘的博客
01-06 2176
用electron-quick-start打包vue桌面程序
经常忘记网址？将Vue项目一键打包为桌面客户端 十分钟让你解决烦恼
Designer 小郑的技术博客
12-06 4713
本文讲解了如何将一个Vue项目打包为桌面客户端，实现像Excel一样双击运行，适用于管理较多项目且经常忘记网址的场景。本文还讲解了 Vue 项目从下载依赖、打包和Nginx部署的全过程，可以给开发者参考学习。
基于Vue的XMall商城PC端前台页面开发
“基于Vue开发的XMall商城前台页面PC端”是一个典型的前端电商项目，其核心是使用Vue.js这一现代化的JavaScript框架来构建一个功能完整、界面友好的电子商务网站的用户界面。该项目专注于PC端的网页设计与实现，旨在...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值