electron-vue将vue-cli框架项目移植，进行打包（win和Linux系统）

最新推荐文章于 2024-08-08 10:56:58 发布
最新推荐文章于 2024-08-08 10:56:58 发布
阅读量3k 收藏 5
点赞数 1
分类专栏： electron-vue 文章标签： electron-vue vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wxj_ios/article/details/86636688
版权
本文介绍了如何将vue-cli项目移植到electron-vue框架，并在Windows和Linux系统上进行打包。首先，确保安装了Node.js和vue-cli，然后通过vue init命令创建electron-vue项目。接着，将vue项目文件替换到renderer目录下，调整webpack配置，并迁移package.json中的依赖。在遇到错误时，可能需要手动下载对应版本的electron打包工具。最后，使用electron-packager进行打包，注意打包过程可能耗时较长。
摘要由CSDN通过智能技术生成

1、使用electron-vue有一些前置设置，你的电脑需要先安装node（现在一般安装node之后，npm就自带了），同时需要安装vue-cli。

以下是安装连接以及安装命令：（参考连接：https://simulatedgreg.gitbooks.io/electron-vue/content/en/）

node安装地址：https://nodejs.org/en/download/

vue-cli安装命令：npm install -g vue-cli

electron-vue安装命令：vue init simulatedgreg/electron-vue my-project

cd my-project

npm install

npm run dev

2、运行npm run dev之后，若是出现错误，那么需要检查一下install的依赖是否完整，同时，版本是否正确。

若是成功，将会看到这样一个界面：

3、然后我们开始移植vue-cli项目。

第一步，找到my-project文件下的src/renderer，将我们自己vue框架src内

最低0.47元/天 解锁文章
wxj_web
关注
专栏目录
【Electron-Vue】构建桌面应用（4）-linux-windows-mac交叉打包
chenqk_123的专栏
09-18 3900
1.前言 上两篇博客做了在windows下的electron-vue项目的打包发布，由于electron是跨平台的，所以需要产品支持多平台即Windows，Linux，Mac os系统。于是尝试在Windows下打包成Linux/Mac OS系统下的安装包，或者在Linux下打包Windows/Mac OS系统下的安装包或者在Mac OS系统下生成其他两个系统的安装包。 2.交叉打包 2.1 Windows下打包系统安装包 1.Windows打包Linux安装包 由于之前的研究全是基于W...
electron-vue初始化项目到打包运行
专注前端技术，包括Web端、移动端、小程序、APP
07-19 717
Electron-vue就是基于vue来构造electron应用程序的样板代码。electron-vue充分利用vue-cli作为脚手架工具，加上拥有vue-loader的webpack、electron-packager或是electron-builder，以及一些最常用的插件，如vue-router、vuex、axios等等。...
在Linux系统打包安装electron-vue项目
最新发布
weixin_73156753的博客
08-08 259
在Linux系统打包安装electron-vue项目菜单图标和图盘图标
electron打包在linux运行
weixin_47063459的博客
07-14 8057
前几天老大让我把别人写好的electron打包放到服务器里，没搞过，一头雾水，一步一步踩坑呗 先在网上搜electron打包打成linux版本 { "name": "electron-quick-start", "version": "1.0.0", "description": "A minimal Electron application", "main": "main.js", "scripts": { "start": "electron .", "pack
vue打包成linux可执行程序（windows、mac可执行程序）
weixin_52213331的博客
11-14 2220
vue打包成linux可执行程序（windows、mac可执行程序）
在Window下打包Electron的linux包
linzhi12的博客
07-23 8410
在Window下打包Electron的linux包 写这份文档主要是记录一下在Window系统下打linux的electron包的一些坑以及方法。 首先，第一次接触的时候，看electron官网中写道可以构建多平台的包，理所当然的以为可以在一个平台下打不同平台的包。于是乎尝试了一下： 报错如下，多方查证度娘，得到的结果是，本来可以。但是由于该服务在去年就挂了之后window环境下就无法打linux的包。好嘛，难道我一定要去liunx下重新搭个环境吗？ 其实不然。 查找过程和解决办法: 首先我使用的elect
Electron项目中通过electron-vue + electron-builder + electron-updater实现远程更新（包含源码）
04-01
`electron-builder`是一个强大的打包和发布工具，它可以将Electron应用打包成适用于不同操作系统的可执行文件。它支持Windows、macOS和Linux，并且可以创建自解压包、DMG、AppImage等多种格式。`electron-builder`还...
electron-vue + vue-cli + element-ui 实时热更新版v12.0.4框架.rar
05-06
electron-vue + vue-cli + element-ui 实时热更新版，electronv12.0.4框架，打包好的框架，拿来即用，实时热更新，提高开发3倍效率
vue-cli-plugin-electron-builder-适用于Electron的Vue CLI 3插件，无需使用Electron Builder的必需配置。-Vue.js开发
05-27
然后，通过运行以下命令安装并调用vue-cli-plugin-electron-builder的生成器：vue add electronic-builder就是这样！ 您准备好出发了！ 要启动开发服务器，请执行以下操作：如果您使用Yarn（强烈建议使用）：yarn ...
electron-vue-vite:Electron、vue3、vite2、ant-design-vue2 整合
05-02
electron-vue-vite Electron + vue3 + vite2 + ant-design-vue2 整合 :bug: 已知问题 项目打包后仍有问题 待解决... 暂时通过集成 webpack 解决打包问题 How and Why 写这个 Demo 项目主要有两个目的 vue@3.x 发布了...
【已验证】vue-cli3 + electron项目打包成桌面客户端
天。朝程序猿的专栏
08-11 2164
前言 很多前端项目需要PC端，vue项目打包结合electron非常方便 vue项目及打包就不再多说，一般大家都会将打包好的文件指向dist文件目录，下面就以此条件进行解说 项目安装依赖 npm i -D electron@latest npm i -D electron-packager 打包客户端 在打包vue后的dist文件夹下增加electron.js和package.json electron.js // Modules to control application...
Electron+Vue构建单体项目打包细节（包含ARM平台踩坑经验）
hyf576501135的专栏
11-29 4168
Electron+Vue构建单体项目 Electron：使用JS、HTML和CSS搭建***跨平台***的桌面应用程序的工具。核心就是跨平台和前端技术，不需要后台（java、php等技术）。 ​        Electron实现这个的基础是它集成了一个浏览器内核，不需要依赖于客户端的其它应用，直接和客户端的CPU、操作系统相关联。就是说它提供了一套适配于各个平台的底层平台，从而达到这个效果。 Vue：渐进式JavaScript框架。以前都是
electron打包linux的.deb安装包还有配置应用启动图标
weixin_52303619的博客
11-17 1612
注意打包.deb安装包时需要在linux系统下运行打包程序。
如何实现window的vue项目移动到linux下
qq_43217550的博客
05-08 903
将window下的这个vue项目复制到linux下，用idea打开 在terminal端直接npm run dev 报错，错误码为126 查阅了好几种方法，下面这种终于成功了 参考链接：https://www.csdn.net/tags/MtTaEgwsMTQ0NTgtYmxvZwO0O0OO0O0O.html rm -rf node_modules rm package-lock.json npm cache clear --force npm install npm audit fi..
electron打包vue-cli项目为桌面程序（四）：使用electron打包vue项目
欢迎
07-08 3547
上一章讲了使用electron进行开发桌面应用，本章主要讲将开发的应用使用electron-packager插件打包 一：安装electron-packager，开发环境使用 cnpm installelectron-packager --save-dev 二：在build文件夹下新建package.json文件，用于启动打包后的应用程序 内容为： { "name": "stud...
electron-vue打包不同平台的安装文件
qq_34799366的博客
03-03 700
electron是一种可以将网页打包成桌面程序的技术，可以根据配置的参数不同打包win，mac，linux三种平台的安装文件，具体的配置方式在项目的package.json文件中，下面是electron-vue项目package.json文件中的一段配置 "scripts": { "build": "node .electron-vue/build.js && electr...
Cordova封装打包vue H5项目到Android平台详解
伟大光荣正确的博客
09-05 1407
安装Cordova npm install -g cordova 安装完成之后终端输入cordova显示下图即表示安装成功 创建Cordova项目 进入你要创建项目的目录执行： cordova create helloWorld helloWorld即为你的项目名 成功创建之后文件夹如下： 创建平台(这里是Android) 进入刚才创建的Cordova项目helloWorld中 cordova platform add android 如果需要添加指定版本的android则在后面加上版本号 co
Electron在windows下打linux包
qiansitong的博客
03-01 4723
electron在winows下打linux包 linux包升级 linux包安装运行失败问题
electron-vue项目打包成exe
06-28
### 回答1： electron-vue 是一个使用 Vue.js 开发跨平台桌面应用的框架，可以使用 electron-builder 工具将其打包成 exe 文件。 以下是将 electron-vue 项目打包成 exe 的基本步骤： 1. 安装 electron-builder 在 electron-vue 项目的根目录下执行以下命令： ``` npm install electron-builder --save-dev ``` 2. 配置打包参数 在项目根目录下创建一个 electron-builder.json 文件，用于配置打包参数。可以参考 electron-builder 的文档进行配置，主要包括应用程序名称、版本号、图标等。 3. 执行打包命令 在项目根目录下执行以下命令进行打包： ``` npm run build:win ``` 该命令会生成一个 dist 目录，其中包含打包后的应用程序和安装程序，可以在 Windows 上运行。 以上就是将 electron-vue 项目打包成 exe 的基本步骤，希望对你有帮助。 ### 回答2： electron-vue 是基于 Vue.js 和 Electron 的开发框架，可以快速构建桌面应用程序。在开发完成后，开发者需要将其打包成 .exe 格式（Windows 可执行文件），以便部署和发布。 以下是将 electron-vue 项目打包成 .exe 文件的步骤： 1. 准备工作 首先要安装 electron-packager 包，这个包可以让我们快速打包 electron 应用程序。可以在终端中输入以下命令进行安装： npm install electron-packager --save-dev 2. 修改 package.json 文件 在 package.json 文件中，需要添加以下代码： "scripts": { "package": "electron-packager ./ --platform=win32 --arch=x64 --icon=./build/icons/icon.ico --out=./dist --ignore=dist --overwrite" } 这个代码段是一个命令，运行它可以将项目打包成指定平台（这里是 win32，也就是 Windows）的可执行文件，以 .exe 格式输出到指定目录（这里是 dist 文件夹）。其中，--icon 表示程序图标，--ignore 是忽略打包的文件夹，--overwrite 表示覆盖已有的输出文件夹。 3. 执行打包命令 在终端中输入以下命令，即可开始打包： npm run package 然后等待一段时间，打包成功之后会在 dist 目录下生成 .exe 文件。 4. 发布 最后将 .exe 文件上传到合适的平台（例如 GitHub Release），这样用户就可以下载并使用了。 注意事项： - 在打包时需要注意修改 .ico 图标文件的路径，确保能正确找到。 - 若需要打包成其他平台的可执行文件，可以修改 --platform 和 --arch 参数。 - 打包时，如果报错了，可以在命令行加上 --verbose 参数，查看具体错误信息。 ### 回答3： electron-vue是一个基于vue.js构建的 electron框架的项目，可以让开发者快速地构建跨操作系统的桌面应用程序，并且electron-vue项目也非常容易打包成exe可执行文件，便于在Windows平台上使用。 打包electron-vue项目成exe的方法: 首先要在命令行中进入项目根目录， 然后运行： npm run build 或 yarn run build 这两个命令将会编译和打包electron-vue项目，生成一个dist目录。 在默认情况下，打包出的exe应用程序是没有图标的，如果需要添加图标，需要在build目录下找到win下的icon.ico文件，并替换成你自己的图标文件。 接下来，需要使用第三方的打包工具，如electron-builder，打包成exe文件，命令如下： npm run dist 或 yarn run dist 执行完这个命令后，就会在dist目录下生成一个installer目录，里面包含着生成的exe文件和其他必要的文件。 理论上，exe应用程序已经可以在Windows平台上使用了。 总结： electron-vue项目打包成exe并不是一件复杂的事情。只需进入项目根目录运行 npm run build 命令，然后使用第三方打包工具electron-builder打包，就可以生成一个可执行的exe文件了，这样就极大地方便了开发者在Windows平台上部署应用程序。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值