背景

朋友是做商品零售，每月都需要将销售数据汇总至年度销售表格中，在这个过程中存在很多重复性的工作，无奈中。在一次聊天中，我了解到他的需求，就用 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 的命令，正常情况下，运行下列指令即可进行打包效果预览：

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 --electron-version=2.0.0 --overwrite"//此处为添加命令
}

如果你想修改最后打包出来的exe文件图标，类似于favicon，或者EXE的名字，可以设置 packager 的指令内容为，icon的路径自己调整下哦，更多配置内容请查阅文档哈：

"packager": "electron-packager ./ YOUR_APP_NAME --platform=win32 --arch=x64 --electron-version=2.0.0 --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：阿里云伺服器建站指南（进阶篇）：发布你的个人主页


推荐阅读：
相关文章