说明
本文将操作 使用electron打包桌面客户端 把助码生成的前端静态文件（js/css/static等）打包成客户端
创建项目
参考electron相关文档
确保安装了合适版本的electron
相关命令 node -v npm -v
可以创建新项目或者使用electron-quick-start项目
本示例演示用electron-quick-start项目
克隆示例项目的仓库
git clone https://github.com/electron/electron-quick-start
进入这个目录
cd electron-quick-start
这个时候目录如下图：
下载引用的包node_modules
cnpm i
各种国内加速地址要根据相关文档设置好，不然会慢
可以先试试环境是否搭建好了
electron .
如果上述命令弹出了hello word窗口说明环境搭建完成
接着打包助码应用
把生成的前端文件复制到项目里面
winVue 生成路径下面的wwwroot里面的全部内容复制到项目根目录下面
（js/css/static/pages/start.htm）
修改main.js文件
替换mainWindow.loadFile('index.html')为下面脚本
~~~js
const localUrl="http://local.file/";
protocol.interceptFileProtocol('http', (request, callback) => {
//console.log('protocol.http', request)
var newurl = request.url.substring(localUrl.length)
request.url='file:///'+path.join(__dirname, newurl)
//console.log('newurl', request.url)
const filePath = URL.fileURLToPath(request.url)
//console.log('filePath', filePath)
callback(filePath)
});
mainWindow.loadURL(localUrl+'start.htm')
~~~
localUrl为本地静态文件我们自定义的域名，可以根据需要修改或者改成其它的
interceptFileProtocol 的意思是当访问localUrl的请求时候 转到读取本地文件，就是我们复制的这些静态文件、
中间用到了URL库 在文件开头引入URL const URL = require('url')
引入protocol
最后在webPreferences 这里添加安全性设置 因为跨域了
webSecurity: false,
最后修改后的结果如下图：
再次运行
electron .
没有问题的话就可以看到界面了
项目打包
electron打包方式有很多种，本示例使用electron-packager打包
添加应用程序ico文件
制作icon.ico文件放到项目根目录下
运行打包命令
electron-packager . 'startzhuma' --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1
打包结果
打包完成以后 会在项目out路径下生成打包后的文件
下载引用的包node_modules
cnpm i
各种国内加速地址要根据相关文档设置好，不然会慢
可以先试试环境是否搭建好了
electron .
如果上述命令弹出了hello word窗口说明环境搭建完成
接着打包助码应用
把生成的前端文件复制到项目里面
winVue 生成路径下面的wwwroot里面的全部内容复制到项目根目录下面
（js/css/static/pages/start.htm）
修改main.js文件
替换mainWindow.loadFile('index.html')为下面脚本
~~~js
const localUrl="http://local.file/";
protocol.interceptFileProtocol('http', (request, callback) => {
//console.log('protocol.http', request)
var newurl = request.url.substring(localUrl.length)
request.url='file:///'+path.join(__dirname, newurl)
//console.log('newurl', request.url)
const filePath = URL.fileURLToPath(request.url)
//console.log('filePath', filePath)
callback(filePath)
});
mainWindow.loadURL(localUrl+'start.htm')
~~~
localUrl为本地静态文件我们自定义的域名，可以根据需要修改或者改成其它的
interceptFileProtocol 的意思是当访问localUrl的请求时候 转到读取本地文件，就是我们复制的这些静态文件、
中间用到了URL库 在文件开头引入URL const URL = require('url')
引入protocol
最后在webPreferences 这里添加安全性设置 因为跨域了
webSecurity: false,
最后修改后的结果如下图：
再次运行
electron .
没有问题的话就可以看到界面了
项目打包
electron打包方式有很多种，本示例使用electron-packager打包
添加应用程序ico文件
制作icon.ico文件放到项目根目录下
运行打包命令
electron-packager . 'startzhuma' --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=0.0.1
打包结果
打包完成以后 会在项目out路径下生成打包后的文件
