把vue文件打包成桌面应用exe（亲测可用）

1. Vue 项目打包为桌面应用

第一步：把electron的官方例子扒下来，留着待用：

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

第二步：

进入我们自己的项目，修改公共路径为相对路径（很多同学都是这步出了问题，导致 npm run build 后出现白屏情况）；

如果你是 vue-cli3 构建的项目：

执行下列指令，打开vue-cli图形配置界面，选择配置，修改公共路径为 ./ , 保存即可：

v2-7f8823532937d935aa325a4001f7d671_720w.jpg

或者在项目的根目录中创建 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 修改为相对路径 ./ ，

qqqqqqqqq.jpg

第三步：

打包你的项目，我相信这步你已经轻车熟路了~，将打包出来的 dist 文件夹复制到之前下载的A文件夹中
npm run build

第四步：

进入刚才下载的官方例子，把自己项目打包的文件（dist文件夹）加复制到官方例子中，然后删除官方例子根目录下的 index.html 文件。

第五步：

在刚才下载的官方例子中找到入口文件 main.js ，修改打包的文件路径为我们的index.html

// main.js 原始内容 
mainWindow.loadFile('index.html') 
// 修改后的内容 
mainWindow.loadFile('./dist/index.html') 

第六步：（初次运行时使用）

下载的官方例子中检查 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//运行项目

打包成功以后就会出来一个桌面应用，如果一切正常的话你已经可以看到自己的项目了，如果出现白屏的情况，可能时自己的项目路径设置有误，请返回查看第二步

第七步：（初次运行时使用）

在下载的官方例子中，下载打包需要的依赖 electron-packager
npm install electron-packager --save-dev
如果你想修改最后打包出来的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的桌面应用。。。。。。。。就离谱来看第二步：

有很多方法可以达到我们的目的，自身感觉 Inno Setup 封装比较简单

Inno Setup打包exe程序

一

首先下载Inno Setup ：链接:
https://jrsoftware.org/isinfo.php

image.png

image.png

下载后是没有中文选项的，所以我们可以下载一个中文包，如果英语比较强的小伙伴也可以用英文，（整体对结果影响不大）

eeeeee.png

安装流程直接下一步就好了

二

安装完成打开 Inno Setup

创建新的项目：

image.png

直接下一步：

image.png

这里要填的是你的项目名称、版本号、发布者、和官网（如果没有的话走一下仪式感就好了）

image.png

设置应用程序文件夹信息，可自定义

image.png

本人在这里踩过很多次坑，添加文件夹时，选择程序文件所在的主目录

image.png

弹出是否包含子文件夹，选择【是】

image.png

这里直接下一步

image.png

设置其他信息或保持默认

image.png

设置应用程序安装时的许可信息、提示信息，可留空

image.png

设置安装选择程序安装时可选的语言，默认选择中文

image.png

选择封装好的exe安装程序的保存位置、exe文件名、exe程序图标及密码

image.png

出现提示点击【下一步】

image.png

是否编译脚本？点击【是】

image.png

保存脚本文档，以便于下次编译

image.png

输入文件名选择保存路径（这个路径就是打包后.exe的文件路径）

image.png

点击完成后就完成了，打开刚才选择的目录点击安装就可以了！！！！