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