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

vite?+?electron-builder?打包配置詳解

 更新時間：2022年09月20日 11:56:07   作者：無奈的胖頭魚  
這篇文章主要為大家介紹了electron基于vite?+?electron-builder?打包配置詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

創(chuàng)一個vite項目

    npm init vite

安裝打包工具

    npm i -D electron               // 20.1.0
    npm i -D electron-builder       // 23.3.3

electron是開發(fā)時運行環(huán)境，electron-builder是打包exe用的。

配置桌面環(huán)境

打開 electron 官網(wǎng)，找到“快速開始”?；旧峡赐赀@一章就可以實現(xiàn)將頁面通過桌面程序運行出來了。

創(chuàng)建 主進程 main.js

項目更目錄下創(chuàng)建 main.js文件與 preload.js 文件, 代碼可以直接復(fù)制官網(wǎng)示例

// main.js
// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')
const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  // 加載 index.html
  mainWindow.loadFile('index.html')
  // 打開開發(fā)工具
  // mainWindow.webContents.openDevTools()
}
// 這段程序?qū)?Electron 結(jié)束初始化
// 和創(chuàng)建瀏覽器窗口的時候調(diào)用
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
// 除了 macOS 外，當(dāng)所有窗口都被關(guān)閉的時候退出程序。 There, it's common
// for applications and their menu bar to stay active until the user quits
// explicitly with Cmd + Q.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})
// In this file you can include the rest of your app's specific main process
// code. 也可以拆分成幾個文件，然后用 require 導(dǎo)入。

// preload.js
// All the Node.js APIs are available in the preload process.
// 它擁有與Chrome擴展一樣的沙盒。
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])
  }
})

添加electron 運行命令

打開 package.json 在 scrpit 對象中添加 electron 運行命令

    "scripts": {
    "dev": "vite --host",
    "build": "vite build",
    "preview": "vite preview",
    "start": "electron .",
  },

打包項目，生成dist

運行 npm run build, 生成dist文件。并且將main.js中mainWindow.loadFile路徑修改為 './dist/index.html'

    const createWindow = () => {
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, '/preload.js')
    }
  })
  // 加載 index.html
  // mainWindow.loadFile('index.html')
  mainWindow.loadFile('./dist/index.html')
  // 打開開發(fā)工具
  // mainWindow.webContents.openDevTools()
}

最后運行 npm run start

解決資源無法加載

最后運行出來會發(fā)現(xiàn)是白屏，打開程序控制臺可以看到是js文件找不到。 打開dist中index.html發(fā)現(xiàn)是js和css路徑都是絕對路徑，所以這里需要修改為相對路徑。

打開 vite.config.js 配置更路徑為相對路徑

export default defineConfig({
  plugins: [vue()],
  base: './',
})

然后重新打包，再運行npm run start 就可以看到頁面了。

開發(fā)環(huán)境：熱更新

這里在開發(fā)環(huán)境中有一個問題就是，咱們這里的渲染進程是打包好的dist文件，無法每次修改后熱更新。只有重新打包生成新的dist后頁面才會更新。這在開發(fā)的時候顯然是方便的。

兩個工具 concurrently wait-on

    npm i concurrently -D
    npm i wait-on -D
  • concurrently：方便 script 同時啟動多個命令
  • wait-on：它可以等待文件、端口、套接字和 http(s) 資源可用后觸發(fā)。

開發(fā)時熱更新，我們就要放棄build一個dist文件來作為渲染進程的做法了。 簡單來說，我們正常執(zhí)行 npm run dev 生成一個頁面服務(wù)，這樣的環(huán)境是有熱更新的。所以我們只需要在主進程中加載dev服務(wù)中的頁面作為渲染進程就可以了。 修改一下主進程 main.js

    ...
    const createWindow = () => {
      // Create the browser window.
      const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
          preload: path.join(__dirname, "/preload.js"),
        },
      });
      // 加載 index.html
      mainWindow.loadURL("http://localhost:3333/");
      // 打開開發(fā)工具
      // mainWindow.webContents.openDevTools()
    };
    ...

然后打開兩個終端，第一個先執(zhí)行 npm run dev，等待服務(wù)啟動后在另外一個里執(zhí)行npm run start 即可。

當(dāng)然我們也可以一個命令完成這些。在package.json中添加命令：

    ...
    "scripts": {
        "dev": "vite --host",
        "build": "vite build",
        "preview": "vite preview",
        "start": "electron .",
        "electron": "wait-on tcp:3333 && electron .",
        "exe-dev": "concurrently -k \"npm run dev\" \"npm run electron\""
      },
    ...

開發(fā)時執(zhí)行 exe-dev 即可。

打包exe

添加打包命令

    ...
    "scripts": {
        "dev": "vite --host",
        "build": "vite build",
        "preview": "vite preview",
        "start": "electron .",
        "electron": "wait-on tcp:3333 && electron .",
        "exe-dev": "concurrently -k \"npm run dev\" \"npm run electron\"",
        "exe-build": "electron-builder"
      },
    ...

執(zhí)行 npm run exe-build ，等待執(zhí)行結(jié)束，dist文件夾下會多一個win-unpacked，其里面有一個exe文件就是我們的程序執(zhí)行文件。

現(xiàn)在我們加載的還是dev服務(wù)，所以還需要修改一下主進程main.js

    ...
      // 加載 index.html
      // 判斷當(dāng)前是否為開發(fā)環(huán)境
      console.log("isPackaged: ", app.isPackaged);
      if (!app.isPackaged) {
        mainWindow.loadURL("http://localhost:3333/");
      } else {
        mainWindow.loadFile("./dist/index.html");
      }
    ...

app.isPackaged 主要用來判斷是否為開發(fā)環(huán)境。

解決index.html找不到的問題

我們打開win-unpacked，執(zhí)行exe文件，會發(fā)現(xiàn)頁面沒有內(nèi)容，打開F12控制臺，發(fā)現(xiàn)index.html根本沒有找到。

其地址 ...dist/win-unpacked/resources/app.asar/dist/index.html，找不到的原因可以大概猜一下是我們的頁面沒有打包進app.asar中。

所以我們可以在electron-builder打包配置中設(shè)置一下我們要打包的文件。

項目更目錄創(chuàng)建 electron.config.json

{
  "files": ["main.js", "preload.js", "./dist"],
  "productName": "test"
}

這里我們設(shè)置了files字段，其目的就是設(shè)置打包的數(shù)據(jù)內(nèi)容。 productName 就是設(shè)置exe文件的文件名。

然后修改exe-build命令

    "exe-build": "electron-builder -config electron.config.json"

運行命令后，可以看到exe文件已經(jīng)修改為test.exe。雙擊運行也可以看到頁面了。

最后完善一下打包命令

    "exe-build": "vite build & electron-builder -config electron.config.json"

以上就是vite + electron-builder 打包配置詳解的詳細內(nèi)容，更多關(guān)于vite + electron-builder 打包配置的資料請關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評論