在vue-cli-plugin-electron-builder下用electron:build打包或生成應(yīng)用程序的兩種方法

接上一篇文章使用vue-cli-plugin-electron-builder開發(fā)vue-cli3.0+Electron桌面開發(fā)應(yīng)用

建議先看文章最后的幾個坑，以免入坑不能爬坑
vue-cli-plugin-electron-builder打包構(gòu)建用的是electron-builder,electron-builder的官網(wǎng)
我們已經(jīng)安裝過vue-cli-plugin-electron-builder就不用再去安裝一遍electron-builder了，我也沒有試過重新安裝一遍好不好用，感興趣的自行測試

第一步，到官網(wǎng)看文檔

image.png

好巧，我們用的就是vue CLI3，點(diǎn)進(jìn)去看看，然后get Start，點(diǎn)擊左側(cè)菜單Configuring

image.png
TIP

All CLI arguments passed to electron:build will be forwarded to electron-builder.
這句話的意思就是：這些參數(shù)都是通過electron:build命令來提交給electron-builder的。
再通俗的講：我們用electron:build來打包的參數(shù)配置格式如圖所示。即：

// vue.config.js

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        // options placed here will be merged with default configuration and passed to electron-builder
      }
    }
  }
}

但是，我們在我們的項(xiàng)目中沒有發(fā)現(xiàn)vue.config.js這個文件，這是由于vue-cli3.0是號稱0配置的，所以我們自己在根目錄下創(chuàng)建一個vue.config.js文件即可。注意！根目錄?。。?！

第二步，寫配置參數(shù)

我們本質(zhì)上用的還是electron-builder來進(jìn)行打包的，所以參數(shù)肯定是在electron-builder的官網(wǎng)上
回到electron-builder官網(wǎng)，并點(diǎn)擊菜單 Configuration


image.png

根據(jù)官網(wǎng)的文檔，我們可以寫出配置如下：

module.exports = {
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                "appId": "com.example.app",
                "productName":"aDemo",//項(xiàng)目名，也是生成的安裝文件名，即aDemo.exe
                "copyright":"Copyright ? 2019",//版權(quán)信息
                "directories":{
                    "output":"./dist"http://輸出文件路徑
                },
                "win":{//win相關(guān)配置
                    "icon":"./shanqis.ico",//圖標(biāo)，當(dāng)前圖標(biāo)在根目錄下，注意這里有兩個坑
                    "target": [
                        {
                            "target": "nsis",//利用nsis制作安裝程序
                            "arch": [
                                "x64",//64位
                                "ia32"http://32位
                            ]
                        }
                    ]
                }
                }
            }

    }
}

構(gòu)建一下試試：
npm run electron:build

D:\Electron\demo>npm run electron:build

> demo@0.1.0 electron:build D:\Electron\demo
> vue-cli-service electron:build

 INFO  Bundling render process:

\  Building modern bundle for production...

 DONE  Compiled successfully in 5022ms                                                                                                                                                                                           4:45:31 PM


  File                                      Size             Gzipped

  dist_electron\bundled\js\chunk-vendors    65.14 KiB        23.43 KiB
  .2026470a.js
  dist_electron\bundled\js\app.4aea6141.    4.53 KiB         1.61 KiB
  js
  dist_electron\bundled\css\app.e2713bb0    0.33 KiB         0.23 KiB
  .css

  Images and other types of assets omitted.

 DONE  Build complete. The dist_electron\bundled directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

|  Bundling main process...

 DONE  Compiled successfully in 5152ms                                                                                                                                                                                           4:45:36 PM


  File                                   Size              Gzipped

  dist_electron\bundled\background.js    160.44 KiB        49.67 KiB

  Images and other types of assets omitted.

 INFO  Building app with electron-builder:
  ? electron-builder version=20.44.4
  ? description is missed in the package.json appPackageFile=D:\Electron\demo\dist_electron\bundled\package.json
  ? author is missed in the package.json appPackageFile=D:\Electron\demo\dist_electron\bundled\package.json
  ? writing effective config file=dist\builder-effective-config.yaml
  ? no native production dependencies
  ? packaging       platform=win32 arch=x64 electron=5.0.0 appOutDir=dist\win-unpacked
  ? no native production dependencies
  ? packaging       platform=win32 arch=ia32 electron=5.0.0 appOutDir=dist\win-ia32-unpacked
  ? building        target=nsis file=dist\aDemo Setup 0.1.0.exe archs=x64, ia32 oneClick=true perMachine=false
  ? building block map blockMapFile=dist\aDemo Setup 0.1.0.exe.blockmap
 DONE  Build complete!

成功！


image.png
LINUX、MAC的道理一樣，我基本用不到這兩個系統(tǒng)，所以不做研究，感興趣的可以自己看文檔。
現(xiàn)在我們win系統(tǒng)32位和64位的生成出來了，那么如果將其制作成對應(yīng)的安裝程序呢？
有兩種方法，第一種就是跟上面一樣，寫配置。第二種，就是運(yùn)用NSIS工具。

第三步：制作成安裝程序

第一種方法：配置參數(shù)的方法
module.exports = {
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                "appId": "com.example.app",
                "productName":"aDemo",//項(xiàng)目名，也是生成的安裝文件名，即aDemo.exe
                "copyright":"Copyright ? 2019",//版權(quán)信息
                "directories":{
                    "output":"./dist"http://輸出文件路徑
                },
                "win":{//win相關(guān)配置
                    "icon":"./shanqis.ico",//圖標(biāo)，當(dāng)前圖標(biāo)在根目錄下，注意這里有兩個坑
                    "target": [
                        {
                            "target": "nsis",//利用nsis制作安裝程序
                            "arch": [
                                "x64"http://64位
                            ]
                        }
                    ]
                },
                "nsis": {
                    "oneClick": false, // 是否一鍵安裝
                    "allowElevation": true, // 允許請求提升。 如果為false，則用戶必須使用提升的權(quán)限重新啟動安裝程序。
                    "allowToChangeInstallationDirectory": true, // 允許修改安裝目錄
                    "installerIcon": "./shanqis.ico",// 安裝圖標(biāo)
                    "uninstallerIcon": "./shanqis.ico",//卸載圖標(biāo)
                    "installerHeaderIcon": "./shanqis.ico", // 安裝時頭部圖標(biāo)
                    "createDesktopShortcut": true, // 創(chuàng)建桌面圖標(biāo)
                    "createStartMenuShortcut": true,// 創(chuàng)建開始菜單圖標(biāo)
                    "shortcutName": "demo", // 圖標(biāo)名稱
                },
                }
            }

    }
}

注意我只生成了64位，安裝試一試：

image.png
image.png

image.png

image.png
正常！
如果要求更高的話，還可以自定義很多東西。還是看文檔！
這篇文章寫得挺詳細(xì)，可以參考，網(wǎng)址
注意一點(diǎn)，他的配置文件和我們的不一樣，我們是在vue.config.js中，并且沒有build！
第二種方法：利用nsis軟件

我們沒有配置nsis時，同時構(gòu)建了32位和64位

module.exports = {
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                "appId": "com.example.app",
                "productName":"aDemo",//項(xiàng)目名，也是生成的安裝文件名，即aDemo.exe
                "copyright":"Copyright ? 2019",//版權(quán)信息
                "directories":{
                    "output":"./dist"http://輸出文件路徑
                },
                "win":{//win相關(guān)配置
                    "icon":"./shanqis.ico",//圖標(biāo)，當(dāng)前圖標(biāo)在根目錄下，注意這里有兩個坑
                    "target": [
                        {
                            "target": "nsis",//利用nsis制作安裝程序
                            "arch": [
                                "x64",//64位
                                "ia32"http://32位
                            ]
                        }
                    ]
                }                
                }
            }

    }
}
image.png
準(zhǔn)備工作：

下載nsis軟件：Nullsoft Install System
鏈接：https://pan.baidu.com/s/1oLRrnclChU09xcosUa_hTw
提取碼：o6iu
解壓，安裝

安裝后，會有兩個快捷方式


image.png
1、打開上面一個
image.png
2、點(diǎn)擊HW VNISEdit
image.png
3、選擇文件》新建腳本：向?qū)?/h6>
image.png
4、點(diǎn)擊下一步，進(jìn)入應(yīng)用程序信息，填寫對應(yīng)的信息，下一步
image.png
5、圖標(biāo)需是icon,語言中文，安裝程序文件根據(jù)實(shí)際情況設(shè)置，別改后綴
image.png
6、閃屏和背景設(shè)置，沒必要修改，下一步
image.png
7、默認(rèn)允許用戶更改安裝目錄；授權(quán)文件若有就寫，如果沒有就清空！清空！清空！否則后面編譯會出問題
image.png
8、把默認(rèn)的兩個文件刪除掉，然后點(diǎn)擊添加
image.png
image.png
9、添加源文件（注意我選擇的是64位的，如果是32位的到win-ia32-unpacked文件中找），選好后點(diǎn)擊確定，先不要下一步
image.png
10、添加文件樹
image.png
11、選擇源文件對應(yīng)的文件夾
image.png
12、勾選包含子目錄，確定，下一步
image.png
13、修改開始菜單
image.png
14、設(shè)置安裝成功后啟動的程序，默認(rèn)就是我們打包后的啟動程序，不用改，下一步
image.png
15、設(shè)置卸載程序，下一步
image.png
16、勾選保存腳本和轉(zhuǎn)換文件路徑到相對路徑，點(diǎn)擊完成
image.png
17、保存一個位置
image.png
18、保存后通常會自行打開腳本，如果沒有打開，請自行到剛才保存的位置打開，打開后界面如下
image.png
19、編譯并運(yùn)行
image.png
20、如果剛才沒有清空許可協(xié)議，會報(bào)錯。解決：刪除報(bào)錯的這一行，重新編譯并運(yùn)行
image.png
21、正在編譯，需要一段時間
image.png
22、編譯成功會自動彈出安裝頁面
image.png
23、安裝后并運(yùn)行，發(fā)現(xiàn)正常
image.png
24、安裝程序應(yīng)該跟保存的編譯文件同一個目錄
image.png
25、開始菜單
image.png
26、第三方管理軟件可以查看，出品公司
image.png

附上碰到的坑：

坑1：vue.config.js中配置參數(shù)不能有空格

"appId ": "com.example.app",有空格會報(bào)錯，不能識別的參數(shù)
"appId": "com.example.app",正確無空格的

報(bào)錯部分樣式,如下：

Error: Configuration is invalid.
 - configuration has an unknown property 'appId '. These properties are valid:
   object { $schema?, afterAllArtifactBuild?, afterPack?, afterSign?, apk?, appId?, appImage?, appx?, artifactBuildCompleted?, artifactBuildStarted?, artifactName?, asar?, asarUnpack?, beforeBuild?, buildDependenciesFromSource?, buildV
ersion?, compression?, copyright?, cscKeyPassword?, cscLink?, deb?, detectUpdateChannel?, directories?, dmg?, electronCompile?, electronDist?, electronDownload?, electronUpdaterCompatibility?, electronVersion?, extends?, extraFiles?, e
xtraMetadata?, extraResources?, fileAssociations?, files?, forceCodeSigning?, framework?, freebsd?, generateUpdatesFilesForAllChannels?, icon?, includePdb?, launchUiVersion?, linux?, mac?, mas?, msi?, muonVersion?, nodeGypRebuild?, nod
eVersion?, npmArgs?, npmRebuild?, npmSkipBuildFromSource?, nsis?, nsisWeb?, onNodeModuleFile?, p5p?, pacman?, pkg?, portable?, productName?, protocols?, protonNodeVersion?, publish?, readonly?, releaseInfo?, remoteBuild?, removePackage
Scripts?, rpm?, snap?, squirrelWindows?, target?, win? }

坑2：配置圖標(biāo)時，圖標(biāo)的大小最小為256*256

"icon":"./shanqis.ico"就是這個圖標(biāo)
報(bào)錯是XXX at least 256*256

坑3：不要直接把.jpg或其他格式改后綴為.ico？解決：http://ico.duduxuexi.com/到這個網(wǎng)址或其他方式自己轉(zhuǎn)換，記住是256*256的

 ERROR  Error: Exit code: 1. Command failed: C:\Users\Administrator\AppData\Local\electron-builder\Cache\winCodeSign\winCodeSign-2.4.0\rcedit-ia32.exe D:\dist\win-unpacked\aDemo.exe --set-version-string FileDescription aDemo --set-vers
ion-string ProductName aDemo --set-version-string LegalCopyright Copyright ? 2019 --set-file-version 0.1.0 --set-product-version 0.1.0.0 --set-version-string InternalName aDemo --set-version-string OriginalFilename  --set-icon D:\Elect
ron\demo\shanqis.ico
Reserved header is not 0 or image type is not icon for 'D'
Fatal error: Unable to set icon

坑4：連接超時403錯誤,由于我們要安裝ia32，所以就要下載對應(yīng)的electron，解決辦法看我之前的一篇文章http://www.itdecent.cn/p/ced7f0c2bd40（注意，下載下來后直接放到對應(yīng)的文件夾下就可以了，不用npm安裝了）

報(bào)錯樣式：

D:\Electron\demo>npm run electron:build

> demo@0.1.0 electron:build D:\Electron\demo
> vue-cli-service electron:build

 INFO  Bundling render process:

|  Building modern bundle for production...

 DONE  Compiled successfully in 5375ms                                                                                                                                                                                           3:32:53 PM


  File                                      Size             Gzipped

  dist_electron\bundled\js\chunk-vendors    65.14 KiB        23.43 KiB
  .2026470a.js
  dist_electron\bundled\js\app.4aea6141.    4.53 KiB         1.61 KiB
  js
  dist_electron\bundled\css\app.e2713bb0    0.33 KiB         0.23 KiB
  .css

  Images and other types of assets omitted.

 DONE  Build complete. The dist_electron\bundled directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

|  Bundling main process...

 DONE  Compiled successfully in 5578ms                                                                                                                                                                                           3:32:59 PM


  File                                   Size              Gzipped

  dist_electron\bundled\background.js    160.44 KiB        49.67 KiB

  Images and other types of assets omitted.

 INFO  Building app with electron-builder:
  ? electron-builder version=20.44.4
  ? description is missed in the package.json appPackageFile=D:\Electron\demo\dist_electron\bundled\package.json
  ? author is missed in the package.json appPackageFile=D:\Electron\demo\dist_electron\bundled\package.json
  ? writing effective config file=D:\dist\builder-effective-config.yaml
  ? no native production dependencies
  ? packaging       platform=win32 arch=x64 electron=5.0.0 appOutDir=D:\dist\win-unpacked
  ? no native production dependencies
  ? packaging       platform=win32 arch=ia32 electron=5.0.0 appOutDir=D:\dist\win-ia32-unpacked
?[34m  ? ?[0mdownloading     ?[34mparts?[0m=8 ?[34msize?[0m=61 MB ?[34murl?[0m=https://github.com/electron/electron/releases/download/v5.0.0/electron-v5.0.0-win32-ia32.zip
?[34m  ? ?[0mretrying (1)
?[34m  ? ?[0mretrying (2)
?[34m  ? ?[0mretrying (3)
?[31m  ? ?[0mpart download request failed with status code 403

結(jié)束語：

好多坑需要爬，多看文檔，多揣摩

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

友情鏈接更多精彩內(nèi)容