打包指令_将Vue项目打包为Windows应用(.exe)
2021年1月9日更新:
新增:解决国内用户下载electron速度太慢的问题
调整:由于electron版本升级,删除原文中对electron版本限制在2.0的命令行语句
背景
朋友是做商品零售,每月都需要将销售数据汇总至年度销售表格中,在这个过程中存在很多重复性的工作,无奈中。在一次聊天中,我了解到他的需求,就用 Vue 做了一个页面,可以实现 Excel 转成 JSON 进行操作,最后再将 JSON 转成 Excel ,虽然后来了解到用 Python应该会更高效,待日后来研究!
不过咱好歹有个图形界面,用户体验好!(自我安慰一波~)
接下来问题便来了,朋友完全不懂编程,每次都准备开发环境也挺麻烦,便想着能不能做成可执行文件.exe,直接双击安装,生成快捷方式,直接就能用,人性化点赞!
1. Vue 项目打包为桌面应用
在网上看了下,常用的解决方案有 Electron 和 nw.js 等,广大群众都采用的 Electron ,鄙人就跟个风吧~
在学习的过程中,发现关于 Electron ,常见的有两种打包方法:
第一种:将自己的 vue 项目打包,放到官方的 demo 文件中,改变打包路径
第二种:在自己的 vue 的项目中引入插件,然后打包
经过一番尝试,我决定采用第一种,原因是:特!别!简!单!
下面详细介绍下第一种方法:
第一步:把electron的官方例子扒下来,下面简称A,留着待用:
git clone https://github.com/electron/electron-quick-start
第二步:进入我们自己的项目(下面简称B),修改公共路径为相对路径(很多同学都是这步出了问题,导致 npm run build 后出现白屏情况):
- 如果你是 vue-cli3 构建的项目:
执行下列指令,打开vue-cli图形配置界面,选择配置,修改公共路径为 ./ , 保存即可:
vue ui
或者你可以点击上图中右上角的 打开 vue 配置, 或者在项目的根目录中创建 vue.config.js, 设置以下内容:
module.exports = {
lintOnSave: undefined,
publicPath: './',
outputDir: undefined,
assetsDir: undefined,
runtimeCompiler: undefined,
productionSourceMap: undefined,
parallel: undefined,
css: undefined
}
- 如果你是vue-cli2 或者 webpack 创建的项目:
进入config文件夹下的 index.js ,将其中的 assetsPublicPath 修改为相对路径 ./ ,保存即可:
第三步:打包你的项目,我相信这步你已经轻车熟路了~,将打包出来的 dist 文件夹复制到之前下载的A文件夹中
npm run build
第四步:进入刚才下载的A项目,删除项目根目录下的 index.html 文件。
第五步:在A项目中找到入口文件 main.js ,修改打包的文件路径为我们的index.html:
// main.js 原始内容
mainWindow.loadFile('index.html')
// 修改后的内容
mainWindow.loadFile('./dist/index.html')
第六步:在A项目中检查 package.json 的命令,正常情况下,运行下列指令即可进行打包效果预览:
// 国内网络下载electron可能很慢,建议设置
// npm config set registry https://registry.npm.taobao.org/
// npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/npm install
npm run start
打包成功以后就会出来一个桌面应用,如果一切正常的话你已经可以看到自己的项目了,如果出现白屏的情况,请返回查看第二步~
第七步:在A项目中,下载打包需要的依赖 electron-packager
npm install electron-packager --save-dev
第八步:在A项目中,进入 package.json ,在 scripts 中添加 packager 指令,如下所示:
"scripts": {
"start": "electron .",
"packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"//此处为添加命令
}
如果你想修改最后打包出来的exe文件图标,类似于favicon,或者EXE的名字,可以设置 packager 的指令内容为,icon的路径自己调整下哦,更多配置内容请查阅文档哈:
"packager": "electron-packager ./ YOUR_APP_NAME --platform=win32 --arch=x64 --icon=./dist/favicon.ico --overwrite"
第九步:运行命令打包,然后项目中会出现一个 App-win32-x64 的文件夹,这个文件就是打包好的桌面应用,文件夹里有一个 App.exe 文件,App.exe就是这个项目的启动文件:
npm run packager
哈哈!大功告成!什么?为什么打包好的不是一个EXE文件,而是一个文件夹?
我只能说太天真!下面我们继续封装EXE安装包
将桌面应用文件夹封装成EXE安装包
有很多方法可以达到我们的目的,我在这里选择 Inno Setup 作为封装工具,整个过程也非常开心愉快~
下面这篇文章写的比较全面,是我想要的内容,哈哈,亲测有效~
开源Inno Setup官网下载、安装、打包教程(官网安装向导中文语言包)www.cnblogs.com
最后最后最后,如果你想从头开始搭建自己的第一台云服务器,欢迎查看我的文章:
MeCC:超详细!阿里云服务器ECS建站指南!
MeCC:阿里云服务器建站指南(进阶篇):发布你的个人主页
打包指令_将Vue项目打包为Windows应用(.exe)相关推荐
- vue项目打包部署到服务器,Vue项目打包部署到apache服务器的方法步骤
vue项目在开发环境下,让项目运行起来,是通过npm run dev命令,原理是在本地搭建了一个express服务器. 但是在服务器上就不是这样的,必须要通npm run build命令来对整个项目进 ...
- vue 打开html流_解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
Vue项目运行npm run build后会生成一个dist文件夹,我们一般都是把这个文件夹部署到服务器上.dist文件夹里边有一个static文件和一个index.html页面,这个index就是最 ...
- vue 打包html静态页面,vue项目打包、vue项目打包后空白界面解决办法
Vue脚手架提供了一个命令npm run build进行打包项目,在package.json中有一个build属性,对应执行命令node build/build.js.执行成功后,项目目录下多了一个d ...
- vue 使用window的对象_如何3分钟把VUE项目打包成apk
必要条件 使用vue-cli3搭建的项目 工具 HBuilder X,他的图标长这个样子,下载地址:https://www.dcloud.io/hbuilderx.html 做前端的大多数小伙伴们都应 ...
- Vue项目打包部署总结
由于之前对前端部署上线这一套不清楚,所以这次通过查找多方资料总结一下.使用Vue作先后端分离项目时,一般前端是单独部署,用户访问的也是前端项目地址,所以前端开发人员颇有必要熟悉一下项目部署的流程与各种 ...
- Vue 项目打包部署实战完整流程总结!
使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了. Vue项目打包部署本身不复杂,不过一些前端同学可能 ...
- vue项目打包文件增加hash值
vue项目打包文件增加hash值 vue-cli2项目 修改vue项目根目录下的 build/webpack.prod.conf.js文件 js文件: output: {path: config.bu ...
- Vue 项目打包为 exe 可安装程序
前言 使用 Electron 和 Inno Setup 将 vue项目打包为 exe 可安装程序 1 ).Electron 下载安装方式 官网地址 git仓库下载地址 git clone https: ...
- Vue项目打包部署到Nginx服务器步骤总结
前期准备工作: 1. 准备一台服务器: 2. 根据服务器的系统环境安装配置Nginx; 3. 了解Nginx的配置文件,了解常用的linux系统操作命令 4. 进行Vue项目的打包部署 因为我只是单纯 ...
最新文章
- 积微论坛报告视频+PPT:用微生物组时序数据重现生物膜装配动态过程
- dns被自动修改_部分 DNS 查询延迟的原因与解决方案
- UA MATH523A 实分析3 积分理论例题 Fubini定理计算重积分的极限
- java导出excel设置行高列宽_使用POI生成Excel文件,可以自动调整excel列宽
- 玩转u8g2 OLED库,一篇就够
- jquery --- 使用when方法等待2个异步事件结束后执行某一个函数.
- MySQL5.5多实例编译安装——mysqld_multi
- 数列分块入门 1(LibreOj-6277)
- 修改placeorder html,数字分发Web服务DDWSPlaceOrder-服务手册-Partner.PDF
- 一种验证Linux kernel是否可用的Sanity Check方法
- 工业机器人 答案 韩建海_探秘沈阳高科技机器人产业,玩转辽宁科技馆体验感爆棚...
- linux nginx安装php5.5,linux下搭建LNMP(linux+nginx+mysql+php)环境之mysql5.5安装
- java list 去除 重复值
- 牛客网–华为机试在线训练5:进制转换
- 第一节:用Cube学32之简单IO口操作(点灯及按键)
- mysql与oracle存储过程_5分钟学会oracle与mysql存储过程insertinto
- IEC61850应用入门读书笔记
- [C++] 最小生成树
- java 聊天室 私聊_Java聊天室——实现多人聊天、私聊、群聊
- (lintcode)第4题 丑数II