vuecli+electron實(shí)例分析

本篇內(nèi)容介紹了“vuecli+electron實(shí)例分析”的有關(guān)知識(shí)，在實(shí)際案例的操作過程中，不少人都會(huì)遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

用vuecli創(chuàng)立一個(gè)vue工程

vue create electron-vue-my

安裝electron-builder

vue add electron-builder
// 安裝的東西很多，注意網(wǎng)絡(luò)
// 可以先安裝cnpm install --save-dev electron-chromedriver
// 本人安裝時(shí)，報(bào)了很多錯(cuò)，后來隔天新建了個(gè)工程，一下子就安裝成功了

安裝成功后，運(yùn)行npm run electron:serve，假如出現(xiàn)以下頁面，說明成功了

image.png

打包桌面應(yīng)用

// 執(zhí)行下面的命令就可
npm run electron:build
//在dist_electron目錄下會(huì)發(fā)現(xiàn)一個(gè)exe，雙擊這個(gè)exe會(huì)執(zhí)行安裝程序。
//還有一個(gè)win-unpacked文件夾，里面是我們之前打包的模式，點(diǎn)擊里面的electron-vue-my.exe，就可運(yùn)行

Electron 配置

常規(guī)的配置基本上都在background.js中

取消跨域限制

win = new BrowserWindow({  width: 800,  height: 600,  webPreferences: {    nodeIntegration: true,    webSecurity: false  }})

設(shè)置窗口圖標(biāo)

準(zhǔn)備windows和macOS兩版圖標(biāo)。

• windows: app.ico 最小尺寸：256x256

• macOS: app.png或者app.icns 最小尺寸：512x512
  把圖標(biāo)文件放到public目錄下：

|- /dist_electron  （略）|- /public   |- app.icns     |- app.ico   |- app.png   |- favicon.ico   |- index.html|- /src  （略）|- .editorconfig    |- .eslintrc.js|- .gitignore|- babel.config.js|- package.json|- package-lock.json|- README.md

圖標(biāo)生成

1. 安裝組件，cnpm install --save-dev electron-icon-builder

2. 準(zhǔn)備好你的圖標(biāo)，放到/public/icon.png

3. 在package.json的scripts下新添加一條命令
   "electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten"

4. 執(zhí)行，npm run electron:generate-icons，生成一系列圖標(biāo)，把圖標(biāo)復(fù)制到public目錄。

打包配置

修改vue.config.js，這里我就把修改的部分放出來：

module.exports = {    pluginOptions: {      electronBuilder: {        builderOptions: {          "appId": "com.wangdaodao.app",          "productName": "AppDemo ", //項(xiàng)目名，也是生成的安裝文件名          "copyright": "Copyright ? 2020", //版權(quán)信息          "directories": {            "output": "./dist_electron" //輸出文件路徑          },          "win": { //win相關(guān)配置            "icon": "./public/icons/icon.ico", //圖標(biāo)，當(dāng)前圖標(biāo)在根目錄下，注意這里有兩個(gè)坑            "target": [              {                "target": "nsis", //利用nsis制作安裝程序                "arch": [                  "x64", //64位                  "ia32" //32位                ]              }            ]          },          "mac": {            "icon": "./public/icons/icon.icns"          },          "nsis": {            "oneClick": false, // 能否一鍵安裝            "allowElevation": true, // 允許請(qǐng)求提升。 假如為false，則客戶必需使用提升的權(quán)限重新啟動(dòng)安裝程序。            "allowToChangeInstallationDirectory": true, // 允許修改安裝目錄            "installerIcon": "./public/icons/icon.ico", // 安裝圖標(biāo)            "uninstallerIcon": "./public/icons/icon.ico", //卸載圖標(biāo)            "installerHeaderIcon": "./public/icons/icon.ico", // 安裝時(shí)頭部圖標(biāo)            "createDesktopShortcut": true, // 創(chuàng)立桌面圖標(biāo)            "createStartMenuShortcut": true, // 創(chuàng)立開始菜單圖標(biāo)            "shortcutName": "AppDemo", // 圖標(biāo)名稱          },        }      }    }}

打包APP

npm run electron:build

刪除dist_electron文件夾，重新執(zhí)行打包命令，npm run electron:build，會(huì)發(fā)現(xiàn)應(yīng)用的圖標(biāo)變了
最終在dist_electron目錄下生成build后的產(chǎn)品。

/dist_electron|- /bundled  （略）|- /win-unpacked  <-- 綠色版  （略）|- AppDemo Setup 0.1.0.exe  <-- 安裝文件|- AppDemo Setup 0.1.0.exe.blockmap|- builder-effective-config.yaml|- index.js

“vuecli+electron實(shí)例分析”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！