手把手教你使用electron将vue项目打包成exe

更新时间：2023年01月10日 10:53:47 作者：什么都干的派森

Electron相当于一个浏览器的外壳,可以把现有的vue程序嵌入到壳里面,下面这篇文章主要给大家介绍了关于如何使用electron将vue项目打包成exe的相关资料,需要的朋友可以参考下

一、前言

node.js 版本要在 17+

建议使用 17.9.1 的 node 和 8.11.0 的 npm

node和npm的版本对应关系如下，node 可以去这里下载

https://nodejs.org/zh-cn/download/releases/ 或者点击这里下载

下载这个 x86.msi 的，安装时候改下安装位置，然后一直下一步就行了

node 所对应的 npm 用如下命令安装

npm install -g npm@8.11.0

二、实现方法

1.跑通示例代码 electron-quick-start

<1>clone示例代码

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

项目结构如下

<2>进入项目根目录，下载依赖

# 进入项目目录
cd electron-quick-start
# 下载项目需要的依赖
npm install
# 安装 electron 
npm install electron --save-dev
# 安装 packager 包依赖
npm install electron-packager --save-dev

<3>测试运行

# 运行一下 Demo 看看是否可以成功
npm run start

运行结果如下

ps:

npm 安装有些包会被墙掉，可能会失败，报错如下：

如果失败了可以安装 cnpm，安装 cnpm 的方法如下：

# 安装并指定淘宝源
npm install -g cnpm --registry=https://registry.npm.taobao.org

然后把上面的 npm 命令都替换成 cnpm 即可，替换后的代码如下：

# 克隆示例代码
git clone https://github.com/electron/electron-quick-start
# 进入项目目录
cd electron-quick-start
# 下载项目需要的依赖
cnpm install
# 安装 electron 
cnpm install electron --save-dev
# 安装 packager 包依赖
cnpm install electron-packager --save-dev
# 运行一下 Demo 看看是否可以成功
cnpm run start

2.打包自己的 vue 项目

到自己已经写好的vue项目中，输入打包命令

npm run build

3.将vue项目整合到示例代码中打包exe

<1>将打包好的 dist 文件夹复制到示例代码 electron-quick-start 根目录

目录结构如下：

<2>修改main.js文件

ps：

index.html 修改为 ./dist/index.html

<3>删除 electron-quick-start 示例本身的 index.html 【这个没用了，可以删了】

<4>修改package.json文件

此处 scripts 字典替换成如下代码

"scripts": {
    "start": "electron .",
	"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"
},

<5>打包exe

npm run packager

执行文件在项目根目录下的 App-win32-x64 文件夹中，叫 App.exe

双击执行，效果如下

ps：

如果执行打包命令时下载文件很慢，那就执行这条命令，把 ELECTRON 下载的地址切换为淘宝的镜像

npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/

总结

到此这篇关于使用electron将vue项目打包成exe的文章就介绍到这了,更多相关electron将vue项目打包exe内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

使用el-form-item设置标签长度
这篇文章主要介绍了使用el-form-item设置标签长度方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
el-table实现嵌套表格的展示功能(完整代码)
el-table中在嵌套一个el-table,这样数据格式就没问题了,主要就是样式,将共同的列放到一列中,通过渲染自定义表头render-header,将表头按照合适的宽度渲染出来,本文给大家分享el-table实现嵌套表格的展示功能,感兴趣的朋友一起看看吧
2024-02-02
记一次Vue.js混入mixin的使用(分权限管理页面)
这篇文章主要介绍了记一次Vue.js混入mixin的使用(分权限管理页面)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-04-04
vue中table多选/单选行,获取其数据方式
这篇文章主要介绍了vue中table多选/单选行,获取其数据方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-07-07
vue项目中loadsh库常用方法说明
这篇文章主要介绍了vue项目中loadsh库常用方法说明,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-11-11
vue.js实现格式化时间并每秒更新显示功能示例
这篇文章主要介绍了vue.js实现格式化时间并每秒更新显示功能,结合实例形式分析了vue.js时间格式化显示与基于定时器进行实时更新的相关操作技巧,需要的朋友可以参考下
2018-07-07
vue的生命周期钩子与父子组件的生命周期详解
Vue的生命周期就是vue实例从创建到销毁的全过程,也就是new Vue() 开始就是vue生命周期的开始。Vue 实例有⼀个完整的⽣命周期,也就是从开始创建、初始化数据、编译模版、挂载Dom -> 渲染、更新 -> 渲染、卸载等⼀系列过程,称这是Vue的⽣命周期
2022-08-08
$vue中get方法\post方法如何传递数组参数详解$
vue中get方法\post方法如何传递数组参数详解
在前后端交互的时候,有时候需要通过get或者delete传递一个数组给后台,下面下面这篇文章主要给大家介绍了关于vue中get方法\post方法如何传递数组参数,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-03-03
Vue实现点击当前行变色
这篇文章主要为大家详细介绍了Vue实现点击当前行变色，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-12-12
前端VUE双语实现方案详细教程
在项目需求中我们会遇到国际化的中英文切换,这篇文章主要给大家介绍了关于前端VUE双语实现方案的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-08-08