步骤一:从官网clone一个例子
git clone https://github.com/electron/electron-quick-start
cd electron-quick-start
npm install
npm start
项目跑起来之后,将文件main.js复制起来粘贴在你的项目的根目录下
步骤二:修改main.js文件
main.js页面修改1:添加一下代码
const path = require('path')
const url = require('url')
main.js页面修改2:将下面代码修改,按照实际项目路径更改main.js中的路径
mainWindow.loadFile('../dist/index.html')
改为:
const startUrl = url.format({
pathname: path.join(__dirname, './dist/index.html'),
protocol: 'file:',
slashes: true
});
mainWindow.loadURL(startUrl);
步骤三:修改config/index.js中生产模式下(build)的assetsPublicPth, 原本为 /, 改为 ./
build: {
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './', //改这里
....
}
步骤四:修改package.json文件
添加文件入口
"main": "main.js",
添加打包的文件入口
"scripts": {
"electron": "electron .",
"packager": "electron-packager ./ myElectron --platform=win32 --arch=x64 --out ./ "
},
注:
配置Mac系统
"package": "electron-packager ./ myElectron --arch=x64 --out ./ "
配置安卓系统
"package": "electron-packager ./ myElectron --platform=win32 --arch=x64 --out ./ "
步骤五:在你的项目中引入electron
cnpm install electron --save-dev
cnpm install electron-packager --save-dev //这个是打成exe文件的插件,之后要用,提前下载好
注:
1、如果在你的原来项目中配置了开发环境的跨域代理配置,需要把代理关掉,这样打包成exe的时候才不会出错
2、若执行npm run packager仍无法打包,卡住在Packaging app for platform win32 x64 using electron v2.0.12久久不动但未报错,是存在版本问题,是你的electron版本太新,为避免这个问题,可先执行npm run electron再执行npm run packager即可
以上就完成了设置
接下来只要运行npm start
就是打开网页版,运行npm run electron
就是打开应用