欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue配置electron使用electron-builder進(jìn)行打包的操作方法

 更新時(shí)間：2024年08月06日 10:27:50   作者：LUNA~  
這篇文章主要介紹了vue配置electron使用electron-builder進(jìn)行打包的操作方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧

1. 已知：vue3項(xiàng)目已經(jīng)創(chuàng)建好

1.1  安裝依賴（npm i） ;運(yùn)行項(xiàng)目（npm run dev），確保項(xiàng)目是好的。

1.2.  打包本地Vue項(xiàng)目（npm run build）

打包好后會(huì)自動(dòng)形成dist 文件夾

一、配置Electron

1.  安裝electron

cnpm install --save-dev electron

安裝好后，package.json 中會(huì)加載electron 及其版本號(hào)

配置 ?????vite.config.js文件

 ps：在配置vite.config.js文件之后可以進(jìn)行打包本地項(xiàng)目。

2. 在根目錄創(chuàng)建electron 文件夾，并新建main.js 和preload.js

main.js :

const { app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
    const win = new BrowserWindow({
      width: 800,
      height: 600,
    //   將此腳本(preload)附加到渲染器流程
      webPreferences: {
        preload: path.join(__dirname, 'preload.js'),
        nodeIntegration: true, //開(kāi)啟true這一步很重要,目的是為了vue文件中可以引入node和electron相關(guān)的API
      contextIsolation: true, // 可以使用require方法
      enableRemoteModule: true, // 可以使用remote方法
      }
    })
  //也開(kāi)頁(yè)面
    win.loadURL('http://localhost:3001')
   //控制臺(tái)
    win.webContents.openDevTools()
  }
  app.whenReady().then(() => {
    createWindow()
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
      })
  })
  app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
  })

preload.js 

window.addEventListener('DOMContentLoaded', () => {
    const replaceText = (selector, text) => {
      const element = document.getElementById(selector)
      if (element) element.innerText = text
    }
    for (const dependency of ['chrome', 'node', 'electron']) {
      replaceText(`${dependency}-version`, process.versions[dependency])
    }
  })

3.在package.json 中配置添加以下代碼：

{
  "name": "vue3_cli_default",
  "version": "1.0.0",
  "description": "Hello World!",
  "main": "electron/main.js",   //main.js修改為electron/main.js
  "author": "Jane Doe",
  "license": "MIT",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    "start": "electron ."
  },
.......
}

4. 安裝concurrently 

cnpm  install concurrently

concurrently：可以同時(shí)執(zhí)行多個(gè)命令

用于此項(xiàng)目中的作用：將啟動(dòng)vite和electron整合成一條命令，一鍵啟動(dòng)

安裝好配置package.json

"dev": "concurrently vite \"electron .\""

5. 安裝  nodemon 實(shí)現(xiàn)熱更新

cnpm i nodemon -D

"dev": "concurrently vite \"nodemon --exec electron . --watch ./ --ext .js,.html,.css,.vue\""

6. 本地啟動(dòng)

cnpm run dev

注意事項(xiàng)：electron 中的main.js 啟動(dòng)地址 要與本地啟動(dòng)的地址保持一致，否則打開(kāi)是空白頁(yè)。

二、 打包和發(fā)布Electron

1. 修改electron/main.js 文件

添加

const NODE_ENV = process.env.NODE_ENV
 win.loadURL(
        NODE_ENV === 'development'
        ? 'http://localhost:3000'
        :`file://${path.join(__dirname, '../dist/index.html')}`
      ); 
if (NODE_ENV === "development") {
        win.webContents.openDevTools()
      }

2. 安裝electron-builder

cnpm i electron-builder -D

 3. 配置package.json

  "scripts": {
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
 "build": {  
    "appId": "luOne",
    "productName": "sd",
    "files": [  
          "dist/**/*",
    "electron/**/*"
    ],
    "directories": {  
      "buildResources": "assets",  
      "output": "electron-dist"
    },  
    "win": {  
      "target": ["nsis"],  
      "icon": "build/icon.ico"  
    }, 
    "mac": {
      "category": "public.app-category.utilities"
    }, 
    "nsis": {  
      "oneClick": false,
      "allowElevation": true, 
      "deleteAppDataOnUninstall": true,
      "allowToChangeInstallationDirectory": true, 
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "測(cè)試文檔項(xiàng)目"
    }  
  }

添加備注：

build: {
 "nsis": {
      "oneClick": false, // 是否一鍵安裝
      "perMachine": false,//perMachine 可能會(huì)影響自動(dòng)更新的安裝權(quán)限問(wèn)題（windows7不受影響）
      "allowElevation": true,// 允許請(qǐng)求提升。 如果為false，則用戶必須使用提升的權(quán)限重新啟動(dòng)安裝程序。
      "allowToChangeInstallationDirectory": true,// 允許修改安裝目錄
      "installerIcon": "./build/icons/icon.ico",// 安裝圖標(biāo)
      "uninstallerIcon": "./build/icons/icon.ico",//卸載圖標(biāo)
      "installerHeaderIcon": "./build/icons/icon.ico",// 安裝時(shí)頭部圖標(biāo)
      "createDesktopShortcut": true, // 創(chuàng)建桌面圖標(biāo)
      "createStartMenuShortcut": true,// 創(chuàng)建開(kāi)始菜單圖標(biāo)
      "runAfterFinish": true,// 安裝完成后是否運(yùn)行項(xiàng)目
      "shortcutName": "client-ico",// 圖標(biāo)名稱
      "include": "build/script/installer.nsh" // 自定義nsis腳本
    },
}

4. 打包

cnpm run dist

打包成功會(huì)自動(dòng)生成 electron-dist 文件夾，其中會(huì)有一個(gè)exe 文件，直接運(yùn)行exe文件即可。

到此這篇關(guān)于vue配置electron如何使用electron-builder進(jìn)行打包的文章就介紹到這了,更多相關(guān)vue electron-builder打包內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論