Vue怎么使用electron生成桌面應(yīng)用

這篇文章主要介紹“Vue怎么使用electron生成桌面應(yīng)用”的相關(guān)知識(shí)，小編通過實(shí)際案例向大家展示操作過程，操作方法簡(jiǎn)單快捷，實(shí)用性強(qiáng)，希望這篇“Vue怎么使用electron生成桌面應(yīng)用”文章能幫助大家解決問題。

安裝依賴

安裝指定版本 此時(shí)日期為 2023-04-11

npm i electron@24.0.0 -D
npm i vite-plugin-electron@0.11.1 -D
npm i electron-builder@23.6.0 -D
npm i cross-env@7.0.3

針對(duì)項(xiàng)目由 vite 創(chuàng)建的 vue3 項(xiàng)目

修改 vite.config.ts

變動(dòng)語句

vite.config.ts 變動(dòng)

import electron from 'vite-plugin-electron'
electron({
    entry: "dist-electron/index.js"
})

放入語句

vite.config.ts 放入

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    electron({
      entry: "dist-electron/index.js"
    })
  ],
})

修改完成后，會(huì)自動(dòng)在項(xiàng)目根目錄出現(xiàn) dist-electron 文件夾，文件夾內(nèi)有一個(gè)文件 index.js

如果沒有自動(dòng)出現(xiàn)，那就手動(dòng)創(chuàng)建

修改 index.js

index.js

import { app, BrowserWindow } from 'electron'
import path from 'path'
// app 控制應(yīng)用程序的事件生命周期。
// BrowserWindow 創(chuàng)建并控制瀏覽器窗口。
let win;
// 定義全局變量獲取 窗口實(shí)例
const createWindow = () => {
    win = new BrowserWindow({
        webPreferences: {
            devTools: true,
            contextIsolation: false,
            nodeIntegration: true
            // 允許html頁面上的javascipt代碼訪問nodejs 環(huán)境api代碼的能力（與node集成的意思）
        }
    })
    if (process.env.NODE_ENV != 'development') {
        win.loadFile(path.join(__dirname, "../dist/index.html"));
    } else {
        // vite-plugin-electron@0.11.1版本使用以下
        win.loadURL(`${process.env['VITE_DEV_SERVER_URL']}`)
    }
}
//在Electron完成初始化時(shí)被觸發(fā)
app.whenReady().then(createWindow)

修改 package.json

• 刪除 “type”: “module”

• “name” 同級(jí)添加 “main”: “dist-electron/index.js”

• ,將 script 中的 dev 指令修改為 cross-env NODE_DEV=development vite

• 將 script 中的 build 指令修改為 vue-tsc --noEmit && vite build && electron-builder

將以下添加到 “name” 同級(jí)

  "build": {
    "appId": "com.electron.desktop",
    "productName": "electron",
    "asar": true,
    "copyright": "Copyright ? 2023 electron",
    "directories": {
      "output": "release/"
    },
    "files": [
      "dist",
      "dist-electron"
    ],
    "mac": {
      "artifactName": "${productName}_${version}.${ext}",
      "target": [
        "dmg"
      ]
    },
    "win": {
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ],
      "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
      "oneClick": false,
      "perMachine": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": false
    },
    "publish": [
      {
        "provider": "generic",
        "url": "http://127.0.0.1:8086"
      }
    ],
    "releaseInfo": {
      "releaseNotes": "版本更新的具體內(nèi)容"
    }
  }

本地測(cè)試

npm run dev

會(huì)自動(dòng)打開

打包成exe文件

npm run build

輸出在項(xiàng)目根目錄下新建的文件夾 release 中，雙擊 exe 文件進(jìn)行安裝就可以打開了

關(guān)于“Vue怎么使用electron生成桌面應(yīng)用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會(huì)為大家更新不同的知識(shí)點(diǎn)。