前言
??最近在忙別的事情腐缤，一直沒來得及更新博客搏明，今天就寫一個關(guān)于桌面應(yīng)用的吧。
??這個東西是我一直想做的郭膛，學(xué)了好長時間的web了晨抡，面對各種網(wǎng)站，心里總有一種說不上來的沖動则剃。
??對桌面應(yīng)用一直感興趣耘柱，就感覺這東西好神奇，怎么就可以變成一個安裝包安裝了棍现？怎么就可直接在桌面打開了调煎？怎么就可以有和網(wǎng)站一樣的功能了？這一切要從一個電子說起轴咱！
開搞
先搞一個vue項(xiàng)目汛蝙，就普普通通的
vue create 項(xiàng)目名就行。不會建的參考我的另一篇博客vue創(chuàng)建項(xiàng)目朴肺，如果還沒有裝環(huán)境的窖剑，先把環(huán)境裝了吧。-
切換到項(xiàng)目目錄下戈稿，用
vue add electron-builder去裝一個electron打包的工具西土，剛開始可能會報(bào)錯，這是因?yàn)檫@個網(wǎng)站在外國鞍盗，必須科學(xué)上網(wǎng)（都懂得）需了。安裝完之后是這樣的
success -
運(yùn)行
npm run electron:serve
success -
打包
npm run electron:build，有時候會報(bào)錯般甲，就像這樣（第一次build的時候要有耐心肋乍，因?yàn)橐B外網(wǎng)，連接超時很正常敷存，多試幾次）
error
這時就再來一次
success
打包成功
還有的會出現(xiàn)node版本出現(xiàn)問題或者是某一個模塊出現(xiàn)缺失墓造，這種情況就要重裝node了，用最新版的就行!(兩個大哥親測 node 12總出bug,就升了16锚烦，就可以了)
- 安裝觅闽，點(diǎn)擊EXE就能安裝了，默認(rèn)路徑是
C:\Users\Administrator\AppData\Local\Programs\項(xiàng)目名
- 這時候可以改安裝路徑涮俄，在項(xiàng)目下建一個和
package.json同級的vue.config.js,里面寫這些東西
module.exports = {
pluginOptions: {
electronBuilder: {
// 渲染進(jìn)程也可以獲取原生node包
nodeIntegration: true,
// 打包配置
builderOptions: {
nsis: {
// 一鍵安裝蛉拙，如果設(shè)為true，nsis設(shè)置就無意義請直接刪除 nsis 配置
oneClick: false,
// true全用戶安裝彻亲，false安裝到當(dāng)前用戶
perMachine: true,
// 允許修改安裝目錄
allowToChangeInstallationDirectory: true,
// 創(chuàng)建桌面圖標(biāo)
createDesktopShortcut: true,
// 創(chuàng)建開始菜單圖標(biāo)
createStartMenuShortcut: true,
// 快捷方式的名稱,默認(rèn)為應(yīng)用程序名稱
// shortcutName: 'xx',
}
}
}
}
};
-
再次打包
success
success
