Vue+Electron打包桌面應(yīng)用(超詳細(xì)完整教程)

更新時(shí)間：2024年02月04日 10:29:03 作者：蕭寂173

這篇文章主要介紹了Vue+Electron打包桌面應(yīng)用超詳細(xì)完整教程,在這大家要記住整個(gè)項(xiàng)目的json文件不能有注釋,及時(shí)沒報(bào)錯(cuò)也不行,否則運(yùn)行命令時(shí)還是有問題,具體細(xì)節(jié)問題參考下本文詳細(xì)講解

一.使用vite+vue3+js方式

切記,整個(gè)項(xiàng)目的json文件不能有注釋,及時(shí)沒報(bào)錯(cuò)也不行,否則運(yùn)行命令時(shí)還是有問題

1.構(gòu)建桌面應(yīng)用

參考此視頻

1- 1.創(chuàng)建項(xiàng)目

 npm create vite@latest
 或者
 npm init vite@latest
 // 選擇vue3+js或者vue3+ts

1- 2. 安裝依賴運(yùn)行項(xiàng)目

// 進(jìn)入項(xiàng)目安裝依賴
npm install
// 運(yùn)行項(xiàng)目
npm run dev

1- 3.配置Electron

npm install electron  //這里建議用鏡像,不然太慢

1- 4.修改配置文件

1) vite.config.js

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
  base: './',	// 新增,打包的dist文件的index.html引入資源css/js的路徑,這里使用相對(duì)路徑,預(yù)防找不到的問題
  plugins: [vue()]
})

2）main.js(項(xiàng)目根目錄新增)

此為electron運(yùn)行的入口文件

// main.js
// 控制應(yīng)用生命周期和創(chuàng)建原生瀏覽器窗口的模組
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
  // 創(chuàng)建瀏覽器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  // 加載 index.html
  mainWindow.loadFile('dist/index.html') // 此處跟electron官網(wǎng)路徑不同，需要注意
  // 打開開發(fā)工具
  // mainWindow.webContents.openDevTools()
}
// 這段程序?qū)?huì)在 Electron 結(jié)束初始化
// 和創(chuàng)建瀏覽器窗口的時(shí)候調(diào)用
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    // 通常在 macOS 上，當(dāng)點(diǎn)擊 dock 中的應(yīng)用程序圖標(biāo)時(shí)，如果沒有其他
    // 打開的窗口，那么程序會(huì)重新創(chuàng)建一個(gè)窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
// 除了 macOS 外，當(dāng)所有窗口都被關(guān)閉的時(shí)候退出程序。 因此，通常對(duì)程序和它們?cè)?
// 任務(wù)欄上的圖標(biāo)來說，應(yīng)當(dāng)保持活躍狀態(tài)，直到用戶使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})
// 在這個(gè)文件中，你可以包含應(yīng)用程序剩余的所有部分的代碼，
// 也可以拆分成幾個(gè)文件，然后用 require 導(dǎo)入。

3）preload.js(項(xiàng)目根目錄下新增)

// preload.js
// 所有Node.js API都可以在預(yù)加載過程中使用。
// 它擁有與Chrome擴(kuò)展一樣的沙盒。
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])
  }
})

4）package.json

{
  "name": "sd",
  "private": true,
  "version": "0.0.0",
  "main": "main.js",  // 新增
  //"type": "module", 創(chuàng)建項(xiàng)目自帶的這個(gè)要?jiǎng)h除,否則會(huì)有問題
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron:serve": "electron ."  //新增 electron運(yùn)行命令
  },
  "dependencies": {
    "electron": "^27.0.0",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.4.5"
  }
}

1- 5.打包vue項(xiàng)目

npm run build

1- 6.運(yùn)行electron

yarn electron:serve
或者
npm run electron:serve

到這一步基本完成了,后面再新增一下熱更新及打包的配置,可以接著往下看

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

2-1. 編輯main.js

將mainWindow.loadFile(‘dist/index.html’)更新為mainWindow.loadURL(“http://localhost:5173”)，更新后的文件如下所示：

// main.js
// 控制應(yīng)用生命周期和創(chuàng)建原生瀏覽器窗口的模組
const { app, BrowserWindow } = require('electron')
const path = require('path')
function createWindow () {
  // 創(chuàng)建瀏覽器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  // 加載 index.html
  // mainWindow.loadFile('dist/index.html') 將該行改為下面這一行，加載url
  mainWindow.loadURL("http://localhost:5173") //這里改成自己的項(xiàng)目啟動(dòng)端口
  // 打開開發(fā)工具
  // mainWindow.webContents.openDevTools()
}
// 這段程序?qū)?huì)在 Electron 結(jié)束初始化
// 和創(chuàng)建瀏覽器窗口的時(shí)候調(diào)用
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    // 通常在 macOS 上，當(dāng)點(diǎn)擊 dock 中的應(yīng)用程序圖標(biāo)時(shí)，如果沒有其他
    // 打開的窗口，那么程序會(huì)重新創(chuàng)建一個(gè)窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
// 除了 macOS 外，當(dāng)所有窗口都被關(guān)閉的時(shí)候退出程序。 因此，通常對(duì)程序和它們?cè)?
// 任務(wù)欄上的圖標(biāo)來說，應(yīng)當(dāng)保持活躍狀態(tài)，直到用戶使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})
// 在這個(gè)文件中，你可以包含應(yīng)用程序剩余的所有部分的代碼，
// 也可以拆分成幾個(gè)文件，然后用 require 導(dǎo)入。

2-2. 同時(shí)開啟vite和electron服務(wù)

為了使vite和electron正常運(yùn)行，需要先運(yùn)行vite，使得其開發(fā)服務(wù)器的url可以正常訪問，然后再開啟electron去加載url。

此處需要安裝兩個(gè)庫：

concurrently：阻塞運(yùn)行多個(gè)命令，-k參數(shù)用來清除其它已經(jīng)存在或者掛掉的進(jìn)程
wait-on：等待資源，此處用來等待url可訪問

安裝命令為

yarn add -D concurrently wait-on
或者
npm install -D concurrently wait-on

接著更新文件package.json，scripts新增兩條命令：

{
  "name": "sd",
  "private": true,
  "version": "0.0.0",
  "main": "main.js",  
  //"type": "module", 創(chuàng)建項(xiàng)目自帶的這個(gè)要?jiǎng)h除,否則會(huì)有問題
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron": "wait-on tcp:5173 && electron .",  //新增更新1(這里改成自己的項(xiàng)目啟動(dòng)端口)
    "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"" //新增更新2  
  },
  "dependencies": {
    "electron": "^27.0.0",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "vite": "^4.4.5"
  }
}

2-3.運(yùn)行

現(xiàn)已添加兩條命令：

yarn electron為等待tcp協(xié)議5173端口可訪問，然后執(zhí)行electron
yarn electron:serve為阻塞執(zhí)行開發(fā)服務(wù)器運(yùn)行和yarn electron命令

運(yùn)行項(xiàng)目只要執(zhí)行命令yarn electron:serve或者npm run electron:serve即可，當(dāng)修改項(xiàng)目文件時(shí)，桌面應(yīng)用也將自動(dòng)更新。

到現(xiàn)在為止,熱更新也已經(jīng)完畢,最后一部分就是打包操作

3.打包操作

先說結(jié)論，重點(diǎn)還是在于mainWindow.loadURL()。
打包后還是加載http://localhost:5173是無法運(yùn)行的，因此，此處需要先用vite打包好，然后使用electron-builder加載vite打包后的文件進(jìn)行打包。
為了代碼能夠根據(jù)不同環(huán)境在運(yùn)行時(shí)加載http://localhost:5173，在打包時(shí)加載文件，此處需要使用環(huán)境變量來切換生產(chǎn)和開發(fā)環(huán)境。

3-1.實(shí)現(xiàn)

3-1-1. 環(huán)境變量

此處使用環(huán)境變量NODE_ENV來切換生產(chǎn)和開發(fā)環(huán)境，生產(chǎn)環(huán)境為NODE_ENV=production，開發(fā)環(huán)境為NODE_ENV=development，若有其它如release等環(huán)境可在此基礎(chǔ)上拓展。

3-2. 創(chuàng)建electron文件夾

在項(xiàng)目根目錄下創(chuàng)建文件夾electron，將main.js和preload.js文件移動(dòng)進(jìn)來.

3-3. 編輯electron/main.js

該文件主要是需要根據(jù)環(huán)境變量切換electron加載的內(nèi)容，修改內(nèi)容如下：

// main.js
// 控制應(yīng)用生命周期和創(chuàng)建原生瀏覽器窗口的模組
const { app, BrowserWindow } = require('electron')
const path = require('path')
const NODE_ENV = process.env.NODE_ENV  //新增
// const NODE_ENV = 'development'  // 判斷開發(fā)或生產(chǎn)模式(建議寫成這種,開發(fā)模式就可以用,等即將打包了再把這個(gè)變量換成打包模式)
function createWindow () {
  // 創(chuàng)建瀏覽器窗口
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  // 加載 index.html
  // mainWindow.loadFile('dist/index.html') // 此處跟electron官網(wǎng)路徑不同，需要注意
  mainWindow.loadURL(
    NODE_ENV === 'development'
    ? 'http://localhost:5173'
    :`file://${path.join(__dirname, '../dist/index.html')}`
  ); // 新增
  // 打開開發(fā)工具
  if (NODE_ENV === "development") {
    mainWindow.webContents.openDevTools()
  } // 新增
}
// 這段程序?qū)?huì)在 Electron 結(jié)束初始化
// 和創(chuàng)建瀏覽器窗口的時(shí)候調(diào)用
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.whenReady().then(() => {
  createWindow()
  app.on('activate', function () {
    // 通常在 macOS 上，當(dāng)點(diǎn)擊 dock 中的應(yīng)用程序圖標(biāo)時(shí)，如果沒有其他
    // 打開的窗口，那么程序會(huì)重新創(chuàng)建一個(gè)窗口。
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
// 除了 macOS 外，當(dāng)所有窗口都被關(guān)閉的時(shí)候退出程序。 因此，通常對(duì)程序和它們?cè)?
// 任務(wù)欄上的圖標(biāo)來說，應(yīng)當(dāng)保持活躍狀態(tài)，直到用戶使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit()
})
// 在這個(gè)文件中，你可以包含應(yīng)用程序剩余的所有部分的代碼，
// 也可以拆分成幾個(gè)文件，然后用 require 導(dǎo)入。

3- 4. 編輯package.json

首先修改main 屬性，將main: main.js改為main: electron/main.js。
接著，編輯build屬性：

{
  "name": "sd",
  "private": true,
  "version": "0.0.0",
  "main": "electron/main.js",  // 修改入口文件位置
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron": "wait-on tcp:5173 && electron .",
    "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\""
  },
  "build": {
    "appId": "com.dweb.demo",  //包id com.dweb.項(xiàng)目名
    "productName": "ElectronApp", // 項(xiàng)目名
    "copyright": "Copyright ? 2021 <your-name>", // 版權(quán)信息
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets", //靜態(tài)文件資源獲取目錄
      "output": "dist_electron" // 打包位置,會(huì)新建到項(xiàng)目根目錄
    }
  },
  "dependencies": {
    "electron": "^27.0.0",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "concurrently": "^8.2.1",
    "vite": "^4.4.5",
    "wait-on": "^7.0.1"
  }
}

然后，更新scripts屬性。
此處需要先安裝兩個(gè)庫：

cross-env: 該庫讓開發(fā)者只需要注重環(huán)境變量的設(shè)置，而無需擔(dān)心平臺(tái)設(shè)置
electron-builder: electron打包庫

cross-env: 該庫讓開發(fā)者只需要注重環(huán)境變量的設(shè)置，而無需擔(dān)心平臺(tái)設(shè)置
electron-builder: electron打包庫

更新后的scripts如下：

{
  "dev": "vite",
  "build": "vite build",
  "serve": "vite preview",
  "electron": "wait-on tcp:5173 && cross-env NODE_ENV=development electron .", // 此處需要設(shè)置環(huán)境變量以保證開發(fā)時(shí)加載url
  "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"",
  "electron:build": "vite build && electron-builder" // 新增打包命令
}

最后，更新后的package.json完整內(nèi)容如下：

{
  "name": "sd",
  "private": true,
  "version": "0.0.0",
  "main": "electron/main.js",  // 修改入口文件位置
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron": "wait-on tcp:5173 && electron .",
    "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"",
    "electron:build": "vite build && electron-builder" // 新增打包命令
  },
  "build": {
    "appId": "com.dweb.demo",  //包id com.dweb.項(xiàng)目名
    "productName": "ElectronApp", // 項(xiàng)目名
    "copyright": "Copyright ? 2021 <your-name>", // 版權(quán)信息
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets", //靜態(tài)文件資源獲取目錄
      "output": "dist_electron" // 打包位置,會(huì)新建到項(xiàng)目根目錄
    }
  },
  "dependencies": {
    "electron": "^27.0.0",
    "vue": "^3.3.4"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "concurrently": "^8.2.1",
    "vite": "^4.4.5",
    "wait-on": "^7.0.1"
  }
}

3-5.打包

yarn electron:build
或者
npm run electron:build

報(bào)錯(cuò)了:Package “electron” is only allowed in “devDependencies”. Please remove it from the “dependencies” section in your package.json.
這段意思就是說electron不允許在開發(fā)依賴,需要換到運(yùn)行依賴?yán)锩?改完后package.json如下:

{
  "name": "sd",
  "private": true,
  "version": "0.0.0",
  "main": "electron/main.js",  // 修改入口文件位置
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron": "wait-on tcp:5173 && electron .",
    "electron:serve": "concurrently -k \"npm run dev\" \"npm run electron\"",
    "electron:build": "vite build && electron-builder" // 新增打包命令
  },
  "build": {
    "appId": "com.dweb.demo",  //包id com.dweb.項(xiàng)目名
    "productName": "ElectronApp", // 項(xiàng)目名
    "copyright": "Copyright ? 2021 <your-name>", // 版權(quán)信息
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets", //靜態(tài)文件資源獲取目錄
      "output": "dist_electron" // 打包位置,會(huì)新建到項(xiàng)目根目錄
    }
  },
  "dependencies": {
    // 將開發(fā)依賴換到了運(yùn)行依賴?yán)锩?
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.2.3",
    "concurrently": "^8.2.1",
    "vite": "^4.4.5",
    "wait-on": "^7.0.1",
    "electron": "^27.0.0",
    "vue": "^3.3.4"
  }
}

打包完成之后，會(huì)多出兩個(gè)文件夾dist和dist_electron

如果打包失敗,或者一直卡著一個(gè)地方,是因?yàn)榇虬鼤?huì)產(chǎn)生依賴包,都是從github下載的,需要vpn,或者國內(nèi)鏡像可以解決,具體使用淘寶鏡像方法可以看本博客最后,親測有效

至此,所有基本結(jié)束,上面這一堆參考了這個(gè)博主的文章,各位也可以看看

二.使用vite+vue3+Ts方式(某大佬已經(jīng)搭建好了,只能Ts)

使用某大佬配置好的框架,只支持ts版本,沒有選擇項(xiàng)(vite+vue3+ts)
方法很簡單
執(zhí)行命令創(chuàng)建項(xiàng)目
npm create electron-vite
首次進(jìn)入會(huì)下載項(xiàng)目依賴,會(huì)詢問是否下載,輸入y即可
然后輸入項(xiàng)目名回車即可創(chuàng)建完畢安裝依賴
npm install運(yùn)行項(xiàng)目
npm run dev
執(zhí)行命令以后會(huì)在electron窗口運(yùn)行打包exe
npm run dev
(大佬已經(jīng)集成了熱部署,代碼更新窗口也更新)

三.使用vue-cli腳手架方式(支持vue2/3)

1.Node版本要求

本人用的是v16.20.2,
原本我用的是18版本結(jié)果打包一直有問題:報(bào)錯(cuò)：Error: error:0308010C:digital envelope routines::unsupported
后來查了大量資料找到了原因:因?yàn)?node.js V17版本中最近發(fā)布的OpenSSL3.0, 而OpenSSL3.0對(duì)允許算法和密鑰大小增加了嚴(yán)格的限制
當(dāng)然針對(duì)17版本以上也有辦法解決,本人使用了最笨的方法就是降低版本到v16.20.2,大家可以看以下這篇博客嘗試其他解決辦法
快速解決Error: error:0308010C:digital envelope routines::unsupported的三種解決方案

2.通過vue-cli創(chuàng)建vue項(xiàng)目(2/3都可以)

使用vue-cli腳手架創(chuàng)建,這個(gè)方法不支持vite

vue create 項(xiàng)目名

3.添加vue自帶的electron-builder

下面命令執(zhí)行后會(huì)先執(zhí)行vue腳手架再運(yùn)行electron

vue add electron-builder

4.打包exe程序

npm run electron:build

注意,打包過程會(huì)下載各種東西,網(wǎng)絡(luò)較差容易下載失敗,給大家推薦一個(gè)好用的方法
在項(xiàng)目根目錄下創(chuàng)建.npmrc文件,放入以下代碼,這樣下載的來源就是去淘寶鏡像去下載,比較快

ELECTRON_MIRROR=https://npm.taobao.org/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=http://npm.taobao.org/mirrors/electron-builder-binaries/

以上的解決網(wǎng)絡(luò)慢問題來源于此

到此這篇關(guān)于Vue+Electron打包桌面應(yīng)用(超詳細(xì)完整教程)的文章就介紹到這了,更多相關(guān)Vue打包桌面應(yīng)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线