vue打包桌面应用

一、把electron的官方例子克隆下来

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

二、修改vue项目配置

1、将自己项目中config/index.js文件assetsPublicPath路径修改，注意dev和build内部的都要改（白屏原因之一）

assetsPublicPath: './',

2、项目使用element-ui的话，还需要修改build/utils.js文件输入路径(输出添加字段publicPath)，否则element中icon无法显示

3、路由mode不能使用history模式，否则白屏

三、npm build打包项目，将生成的dist文件放入electron项目根目录

1、删除根目录中index.html文件

.electron项目目录

2、修改项目中main.js文件

3、根据虚修设置窗口信息，调整main.js中new BrowserWindow对应参数即可

四、初始化electron-quuick-start项目

由于国内网络下载electron可能很慢，建议设置镜像后再初始化：

npm config set registry https://registry.npm.taobao.org/

npm config set ELECTRON_MIRROR http://npm.taobao.org/mirrors/electron/

npm install

五、运行查看效果，正常运行后就可以打包了应用

六、 安装打包文件

npm install electron-packager --save-dev 

七、electron-quuick-start项目package.json文件添加打包指令packager

"scripts": { 

    "start": "electron .", 

    "packager": "electron-packager ./ App --platform=win32 --arch=x64 --overwrite"//此处为添加命令

} 

八、  运行npm run  packager，然后项目中会出现一个 App-win32-x64 的文件夹，这个文件就是打包好的桌面应用，文件夹里有一个 App.exe 文件，App.exe就是这个项目的启动文件

九、运行继续封装exe安装包，Inno Setup官网下载安装（安装方式）

十、没有生成应用，可打开脚本运行，运行完安装程序就会生成桌面应用