vue PC端项目打包成windows桌面程序

一、npm run build 生成dist文件
注意：打包dist文件需要将绝对路径"/“改为相对路径”./"
二、把electron的官方例子扒下来，简称项目A

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

三、删除项目A根目录中的index.html，并将之前打包的dist文件放在项目A根目录下

四、在项目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

六、下载打包需要的依赖 electron-packager

npm install electron-packager --save-dev 

七、进入 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安装包
下载Inno Setup并安装

十、打包安装包
1.
2.
3.程序名称、版本号、公司名称、网址
4.
5.添加项目文件
注意：添加文件夹要选Release文件夹（会包含内部所有文件夹），添加文件进入Release，选中所有文件。打包成功安装后有问题查看安装包目录与项目中预览安装包目录是否一致，不一致则是此步骤问题。

6.
7.
8.
9.
10.
11.
12.
13.
14.
15.