vue项目包装成electron桌面应用（超简单！！只需四步）

最新推荐文章于 2025-06-09 09:45:31 发布

原创最新推荐文章于 2025-06-09 09:45:31 发布 · 1.4k 阅读

CC 4.0 BY-SA版权

文章标签：

12 篇文章

订阅专栏

7 篇文章

订阅专栏

本文详细介绍如何使用Electron和electron-packager构建桌面应用程序。从安装NodeJS、配置淘宝镜像、安装Git开始，到全局安装Electron和electron-packager，再到修改Vue项目配置并构建，最后打exe包。适合前端工程师转型桌面应用开发。

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

2、配置淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

以上都是前端工程师基本的操作了这里不赘述，不清楚的百度即可

全局安装electron ; 全局安装electron-packager，用于打exe包

cnpm install electron -g

cnpm install electron-packager -g

在某一个目录下右键，点击“Git Bash Here”

依次执行以下命令，克隆示例后进入示例文件夹并用淘宝镜像安装依赖包（也可以直接用npm，但是会慢很多），运行项目

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

cd electron-quick-start

cnpm install

npm run start

会出现以下界面，表示运行成功

由于我们以往构建的vue项目是需要放在服务器上，一般不能够在本地直接打开index.html，其中的原因主要是静态文件的引用路径问题。

以vue-cli脚手架的vue.config.js为例

将publicPath修改为“./”

cd到vue项目根路径。执行npm run build，生成dist文件夹，此时我们直接在文件管理器中双击index.html，可以直接打开项目

将dist文件夹下的所有内容复制到electron-quick-start示例根路径下，覆盖原有index.html

在此目录下运行

npm run start

会发现我们的项目已经显示在桌面应用窗口中

在pakage.json中的scripts中添加以下命令

"build": "electron-packager . myapp --out myapp --arch=x64 --overwrite --ignore=node_modules"

说明

electron-packager . 应用名称 --out 输出文件夹 --arch=x64 --overwrite --ignore=node_modules

打开cmd终端，执行npm run build

npm run build

打包后如图

双击myapp.exe即可打开桌面应用

以上，感谢观看