说明

本文将操作 使用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

这个时候目录如下图：

image

下载引用的包node_modules

cnpm i

各种国内加速地址要根据相关文档设置好，不然会慢

可以先试试环境是否搭建好了

electron .

如果上述命令弹出了hello word窗口说明环境搭建完成

image

接着打包助码应用

把生成的前端文件复制到项目里面

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,

最后修改后的结果如下图：

image

再次运行

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路径下生成打包后的文件

image