Electron + vue 打包桌面操做 流程

提早準備一個vue項目，也能夠使用初始的vue項目
vue init webpack
安裝到後邊有的會出現報錯，能夠忽略，啓動npm run dev 啓動成功就能夠

在vue項目下執行下載如下依賴，會用到
cnpm install electron --save-dev
cnpm install electron-packager --save-dev //這個是打成exe文件的插件，以後要用，提早下載好
獲取Electron的資源
git clone https://github.com/electron/e...
cd electron-quick-start
cnpm install //這裏我用的是cnpm,npm太慢了

將Electron獲取到資源的main.js複製到vue裏面的bulid裏面並修改成electron.js

而後修改

將assetsPublicPath: '/' 改成./，都是爲了獲取準確的路徑
而後再修改electron.js

改成 這個pathname: path.join(__dirname, '../dist/index.html')
不懂的能夠去搜vue 的 dist

這些改好了以後配置package.json

用來啓動 npm run abc

啓動成功爲

啓動成功能夠執行下一步
在配置打包的package.json

關於electron-packager的配置，簡單介紹一下。
electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]

sourcedir 資源路徑，在本例中既是./dist/

appname 打包出的exe名稱

platform 平臺名稱（windows是win32）

arch 版本，本例爲x64

到這裏尚未完由於還有坑呢
我就把坑跳過

將bulid的electron.js文件複製到dist中，將package.json也複製到當中（提示dist文件和裏面內容自動生成不用本身建立）
而後修改electron.js

mainWindow.loadURL(url.format({

pathname: path.join(__dirname, 'index.html'),
protocol: 'file:',
slashes: true

}))
再修改複製到dist中的package.json

再啓動npm run go 會出現打包成功的文件夾再從裏面尋找exe文件 就能夠了！！！！！