步驟一：從官網(wǎng)clone一個例子

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

cd electron-quick-start

npm install

npm start

項目跑起來之后，將文件main.js復制起來粘貼在你的項目的根目錄下

image

步驟二：修改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中生產(chǎn)模式下（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系統(tǒng)
"package": "electron-packager ./ myElectron --arch=x64 --out ./ "
配置安卓系統(tǒng)
"package": "electron-packager ./ myElectron --platform=win32 --arch=x64 --out ./ "

步驟五：在你的項目中引入electron

cnpm install electron --save-dev
cnpm install electron-packager --save-dev //這個是打成exe文件的插件，之后要用，提前下載好

注：
1、如果在你的原來項目中配置了開發(fā)環(huán)境的跨域代理配置，需要把代理關掉，這樣打包成exe的時候才不會出錯
2、若執(zhí)行npm run packager仍無法打包，卡住在Packaging app for platform win32 x64 using electron v2.0.12久久不動但未報錯，是存在版本問題，是你的electron版本太新，為避免這個問題，可先執(zhí)行npm run electron再執(zhí)行npm run packager即可
以上就完成了設置
接下來只要運行npm start就是打開網(wǎng)頁版，運行npm run electron就是打開應用