準(zhǔn)備
- yarn
npm install -g yarn
yarn --version
# 設(shè)置淘寶鏡像
yarn config set registry https://registry.npm.taobao.org
yarn config set electron_mirror https://npm.taobao.org/mirrors/electron/
yarn config list
- VueCli4
npm install -g @vue/cli
vue --version
創(chuàng)建Vue工程
vue create <project_name>
集成Electron
添加electron-builder插件
cd <project_name>
vue add electron-builder
-
選擇Electon版本，此處選擇6版本蔓罚，添加完插件后再修改為8版本
-
添加成功
修改package.json
安裝
yarn install
運(yùn)行
yarn electron:serve
構(gòu)建
yarn electron:build
- 構(gòu)建需要下載一些依賴椿肩，如果下載的很慢瞻颂，則復(fù)制URL，使用下載軟件下載依賴郑象。下載完成后拷貝到緩存目錄中贡这，解壓到當(dāng)前目錄
- mac緩存目錄：
/Users/xxx/Library/Caches/electron-builder - windows緩存目錄：
C:\Users\xxx\AppData\Local\electron-builder\cache
- mac緩存目錄：
-
構(gòu)建完成
- 構(gòu)建參數(shù)，electron-builder cli
yarn electron:build --mac
yarn electron:build --mac --win
- 安裝包配置扣唱，electron-builder configuration
- vue.config.js
module.exports = {
pluginOptions: {
electronBuilder: {
builderOptions: {
appId: 'com.electron.demo',
// 程序名
productName: 'ElectronDemo',
// 安裝包名
artifactName: '${name}-${version}.${ext}',
win: {
icon: './public/icon.ico',
target: 'nsis'
},
nsis: {
// 是否一鍵安裝
oneClick: false,
// 允許權(quán)限提升
allowElevation: true,
// 每個(gè)用戶安裝
perMachine: true,
// 允許用戶更改安裝目錄
allowToChangeInstallationDirectory: true,
// 創(chuàng)建桌面快捷方式
createDesktopShortcut: true,
// 創(chuàng)建開始菜單快捷方式
createStartMenuShortcut: true
},
mac: {
icon: './public/icon.icns',
target: 'dmg'
}
}
}
}
}
