一、介紹??? ?? ??
Electron是一個使用 JavaScript、HTML 和 CSS 構(gòu)建桌面應(yīng)用程序的框架。 嵌入?Chromium?和?Node.js?到 二進制的 Electron 允許您保持一個 JavaScript 代碼代碼庫并創(chuàng)建 在Windows上運行的跨平臺應(yīng)用 macOS和Linux——不需要本地開發(fā)經(jīng)驗(這段話是來自官網(wǎng))。
二、搭建Vite+Vue3+TypeScript項目??? ?? ??
根據(jù)vite官網(wǎng)文檔
yarn create vite
項目創(chuàng)建完成后進入demo目錄，執(zhí)行yarn安裝相關(guān)依賴
三、安裝Electron相關(guān)依賴??? ?? ??
如果你自己安裝過Electron的相關(guān)依賴，想必你一定經(jīng)歷過失敗、失敗、失敗。
這里需要借助一個網(wǎng)站檢測服務(wù)器響應(yīng)速度，然后拿到最快響應(yīng)的ip進行本地配置加快我們的域名解析。
通過該工具可以多個地點Ping服務(wù)器以檢測服務(wù)器響應(yīng)速度。檢查github.com。我都選擇國內(nèi)的，看自己想法選擇啊。選擇之前自己在本地ping一下，通了的話就能使用。
修改 C:\Windows\System32\drivers\etc\hosts
20.27.177.113 github.com如果設(shè)置執(zhí)行yarn出現(xiàn)RequestError: connect ETIMEDOUT ***.***.***.***:443就更改一下electron安裝源
yarn config set electron_mirror https://npmmirror.com/mirrors/electron/安裝electron依賴??? ?? ?? ??
yarn add -D electron electron-builder根據(jù)官網(wǎng)提供的文檔,需要創(chuàng)建一個BrowserWindow裝載vite項目,你也可以寫一個html頁面。 這里我們啟動vite項目以后就會產(chǎn)生一個連接，正好把它裝載到 BrowserWindow中。
因為src下面存放的是我們的vite項目，所以在根目錄下創(chuàng)建一個electron文件夾，避免后續(xù)文件多了以后混淆起來，現(xiàn)在創(chuàng)建這個main.ts就是我們electron的入口文件。名字隨便起，知道是干啥的就行。
項目根目錄下electron文件夾下創(chuàng)建main.ts文件
const { app, BrowserWindow } = require('electron')
let win
/**
* @Description: electron程序入口
* @Author: Etc.End
* @Copyright: TigerSong
* @CreationDate 2023-05-20 14:39:26
*/
const createWindow = () => {
win = new BrowserWindow({
width: 1200,
height: 800,
minWidth: 1200,
minHeight: 800,
center: true,
skipTaskbar: false,
transparent: false,
webPreferences: {
contextIsolation: false,
webSecurity: false,
}
})
win.loadURL(
'http://localhost:5173/'
)
win.webContents.openDevTools()
}
app.whenReady().then(() => {
createWindow()
})
/**
* @Description: 限制只能打開一個頁面
* @CreationDate 2023-05-20 14:35:52
*/
const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
app.quit()
} else {
app.on('second-instance', (event, commandLine, workingDirectory) => {
if (win) {
if (win.isMinimized()) win.restore()
win.focus()
}
})
}
app.on('window-all-closed', function () {
if(process.platform !== 'darwin') app.quit()
})
接著修改package.json文件
配置完成以后分別啟動yarn dev 和 yarn start，出現(xiàn)以下窗口表示搭建成功了。
四、優(yōu)化??? ?? ??
因為現(xiàn)在需要啟動兩個服務(wù)，比較麻煩，可以借助concurrently插件整合。一個命令完成多個應(yīng)用的啟動。同時安裝cross-env插件設(shè)置我們的環(huán)境變量。wait-on進行一個端口啟動監(jiān)聽。
yarn add concurrently wait-on cross-env -D
安裝完成以后修改啟動和打包命令?
"scripts": {
"dev": "concurrently -k \"vite\" \"yarn dev:electron\"",
"dev:electron": "wait-on tcp:5173 && cross-env NODE_ENV=development electron .",
"build": "vite build && electron-builder --win --config",
"build:mac": "vite build && electron-builder --mac --config",
"build:linux": "vite build && electron-builder --linux --config"
},
{
"name": "demo",
"private": true,
"version": "0.0.0",
"type": "module",
"main": "electron/main.ts",
"scripts": {
"dev": "concurrently -k \"vite\" \"yarn dev:electron\"",
"dev:electron": "wait-on tcp:5173 && cross-env NODE_ENV=development electron .",
"build": "vite build && electron-builder --win --config",
"build:mac": "vite build && electron-builder --mac --config",
"build:linux": "vite build && electron-builder --linux --config"
},
"build": {
"productName": "TigerSong", // 生成的exe文件名
"copyright": "Copyright @ 2023 TigerSong", //版權(quán)
"directories": { // 輸出文件夾
"output": "dist"
},
"files": [
"dist/**/*",
"electron/**/*"
],
"nsis": {
"oneClick": false, // 是否一鍵安裝
"allowElevation": true, // 允許請求提升
"allowToChangeInstallationDirectory": true, // 安裝時可以修改安裝目錄
"createDesktopShortcut": false, // 創(chuàng)建桌面圖標
"createStartMenuShortcut": false // 創(chuàng)建開始菜單圖標
}
},
"dependencies": {
"vue": "^3.2.47"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.1.0",
"concurrently": "^8.0.1",
"cross-env": "^7.0.3",
"electron": "^24.3.1",
"electron-builder": "^23.6.0",
"typescript": "^5.0.2",
"vite": "^4.3.2",
"vue-tsc": "^1.4.2",
"wait-on": "^7.0.1"
}
}
接著修改我們的electron文件夾下的main.ts文件。
const { app, BrowserWindow } = require('electron')
const path = require('path')
const NODE_ENV = process.env.NODE_ENV
let win
/**
* @Description: electron程序入口
* @Author: Etc.End
* @Copyright: TigerSong
* @CreationDate 2023-05-20 14:39:26
*/
const createWindow = () => {
win = new BrowserWindow({
width: 1200,
height: 800,
minWidth: 1200,
minHeight: 800,
center: true,
skipTaskbar: false,
transparent: false,
webPreferences: {
contextIsolation: false,
webSecurity: false,
}
})
win.loadURL(
NODE_ENV === 'development' ? 'http://localhost:5173/' : `file://${path.join(__dirname, '../dist/index.html')}`
)
if (NODE_ENV === 'development') {
win.webContents.openDevTools()
}
}
app.whenReady().then(() => {
createWindow()
})
/**
* @Description: 限制只能打開一個頁面
* @CreationDate 2023-05-20 14:35:52
*/
const gotTheLock = app.requestSingleInstanceLock()
if (!gotTheLock) {
app.quit()
} else {
app.on('second-instance', (event, commandLine, workingDirectory) => {
if (win) {
if (win.isMinimized()) win.restore()
win.focus()
}
})
}
app.on('window-all-closed', function () {
if(process.platform !== 'darwin') app.quit()
})
執(zhí)行yarn dev 進行檢測，出現(xiàn)下面的內(nèi)容表示配置成功，基礎(chǔ)腳手架就已經(jīng)搭建完成了。
接著測試我們的打包是否正常。
修改vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
base: './',
plugins: [vue()],
})
執(zhí)行yarn build，這個第一次可能優(yōu)點慢，看自己的網(wǎng)速如何了。也可能會出現(xiàn)連接失敗，下載失敗的情況，多嘗試幾次。
像上面一樣就說明我們已經(jīng)打包成功了。打開程序
運行起來后出現(xiàn)下圖表示我們的打包已沒有任何問題了。
dist目錄下還有生成的安裝程序，可以拷貝至其他目錄進行自定義安裝。到此我們的程序已經(jīng)搭建結(jié)束了，接著下一篇開始講解如何使用electron進行爬蟲實現(xiàn)自己音樂播放器。感興趣的小伙伴可以關(guān)注我的Electron專欄，在不斷更新中。
我是Etc.End。如果文章對你有所幫助，能否幫我點個免費的贊和收藏??。
文章來源：http://www.zghlxwxcb.cn/news/detail-432583.html
??? ?? ?? ?? ?? ?? ?? ?? ?? ?? ?? ??文章來源地址http://www.zghlxwxcb.cn/news/detail-432583.html
到了這里，關(guān)于快速搭建Electron+Vite3+Vue3+TypeScript5腳手架 (無需梯子，快速安裝Electron)的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
