本文小編為大家詳細(xì)介紹“如何使用vue3+ts+vite+electron搭建桌面應(yīng)用”,內(nèi)容詳細(xì),步驟清晰,細(xì)節(jié)處理妥當(dāng),希望這篇“如何使用vue3+ts+vite+electron搭建桌面應(yīng)用”文章能幫助大家解決疑惑,下面跟著小編的思路慢慢深入,一起來(lái)學(xué)習(xí)新知識(shí)吧。
成都創(chuàng)新互聯(lián)公司專(zhuān)注于臨翔網(wǎng)站建設(shè)服務(wù)及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠(chéng)為您提供臨翔營(yíng)銷(xiāo)型網(wǎng)站建設(shè),臨翔網(wǎng)站制作、臨翔網(wǎng)頁(yè)設(shè)計(jì)、臨翔網(wǎng)站官網(wǎng)定制、微信小程序開(kāi)發(fā)服務(wù),打造臨翔網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供臨翔網(wǎng)站排名全網(wǎng)營(yíng)銷(xiāo)落地服務(wù)。
vite: ^4.2.0
vue: ^3.2.47
ts: ^4.9.3
electron: ^23.2.1
yarn create vite@ vuets_electron --template vue-ts cd ./vuets_electron yarn install && yarn dev
為了保證electron能夠正常安裝,在
vuets_electron
的根目錄下創(chuàng)建.npmrc
, 設(shè)置一下electron的鏡像源
# /.npmrc ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
安裝electron相關(guān)的包
# electron yarn add -D electron # electron-builder 用于打包 yarn add -D electron-builder # electron-devtools-installer yarn add -D electron-devtools-installer # 為了保證后續(xù)步驟,這里在安裝一個(gè)concurrently, yarn add concurrently
創(chuàng)建electron主進(jìn)程文件main.ts: /src/main/main.ts
const { app, BrowserWindow } = require('electron') const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, // webPreferences: { // preload: path.join(__dirname, 'preload.js') // } }) // 加載vue url視本地環(huán)境而定,如http://localhost:5173 win.loadURL('http://localhost:3000') } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() })
調(diào)整啟動(dòng)命令:package.json
1 vue 啟動(dòng): yarn dev
2 那electron要如何啟動(dòng)呢? 從electron官方文檔我們可以清楚的知道,electron可以加載URL,那么我們就可以在啟動(dòng)electron之前啟動(dòng)vue,然后將vue的訪問(wèn)入口接入electron,在同時(shí)啟動(dòng)electron不就可以了嗎~
3 千萬(wàn)不要忘了設(shè)置入口文件喲~~~
{ "name": "vuets_electron", "private": true, "version": "1.0.0", // +++ 增加入口 "main": "src/main/main.js", // +++ "scripts": { "dev": "vite", "build": "vue-tsc && vite build", "preview": "vite preview", // +++ 設(shè)置electron開(kāi)發(fā)啟動(dòng)命令 "electron:dev": "concurrently \"yarn dev\" \"electron .\"" // +++ } // ... // 其它配置 }
到這,我們運(yùn)行 yarn electron:dev 就能看到熟悉的electron頁(yè)面了
1 打包vue
2 將vue的入口文件接入electron
3 打包electron這樣我們就能得到完整的安裝包
# package.json { "name": "vuets_electron", "private": true, "version": "1.0.0", "main": "src/main/main.js", // +++ "scripts": { "dev": "vite", "build": "vue-tsc && vite build", "preview": "vite preview", "electron:dev": "concurrently \"yarn dev\" \"electron .\"", // +++ 設(shè)置electron打包命令 "electron:build": "yarn build && electron-builder" // +++ } // ... // 其它配置 // +++ 打包相關(guān)設(shè)置 "build": { "appId": "ink.bennent_g.demo", "directories": { "output": "output" }, // 其它的build相關(guān)設(shè)置,可參考 electron-builder官方文檔 } }
vite.config.ts調(diào)整
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [ vue(), ], // +++ base: './', // +++ server: { port: 3000 } // ... })
src/main/main.ts 調(diào)整
const { app, BrowserWindow } = require('electron') const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, // webPreferences: { // preload: path.join(__dirname, 'preload.js') // } }) // +++ 開(kāi)發(fā)環(huán)境與打包后加載vue入口文件有所區(qū)別 // and load then index.html or the app if(process.env.npm_lifecycle_event === 'electron:dev') { win.loadURL('http://localhost:3000') win.webContents.openDevTools() } else { win.loadFile('dist/index.html') } // +++ } app.whenReady().then(() => { createWindow() app.on('activate', () => { if (BrowserWindow.getAllWindows().length === 0) createWindow() }) }) app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit() })
為了清晰的區(qū)分electron的主進(jìn)程和渲染進(jìn)程,我們可以將vue相關(guān)的文件規(guī)整到render的目錄下
移動(dòng)vue相關(guān)文件,請(qǐng)務(wù)必注意vue相關(guān)引用的路徑問(wèn)題
如下是本人的目錄結(jié)構(gòu),可參考
vuets_electron // 項(xiàng)目名稱(chēng) │ —— node_modules │ —— dist // vue打包目錄 │ —— output // electron打包目錄 │ —— public │ —— .npmrc │ —— package.json │ —— vite.config.ts │ —— tsconfig.json │ └─── src // 開(kāi)發(fā)相關(guān)目錄 │ │ main.ts // vue默認(rèn)入口文件 │ └───assets // 靜態(tài)資源目錄 │ │ ... │ └───main // electron主進(jìn)程目錄 │ │ main.ts │ └───render // 渲染進(jìn)程目錄即vue相關(guān)目錄結(jié)構(gòu) │ │ router │ │ views │ │ ...
至此 我們的electron開(kāi)發(fā)框架就搭建完成了,可以愉快的擼代碼了~
如果項(xiàng)目使用了vue-router,我們?cè)赽uild后運(yùn)行exe,會(huì)發(fā)現(xiàn)首頁(yè)
白屏
,這是因?yàn)?electron 僅支持hash
模式,如果使用了createWebHistory()
創(chuàng)建路由,可更改為createWebHashHistory()
即可
const router = createRouter({ // history: createWebHistory(), // 修改為 history: createWebHashHistory(), routes })
讀到這里,這篇“如何使用vue3+ts+vite+electron搭建桌面應(yīng)用”文章已經(jīng)介紹完畢,想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì),如果想了解更多相關(guān)內(nèi)容的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dāng)前名稱(chēng):如何使用vue3+ts+vite+electron搭建桌面應(yīng)用
文章源于:http://muchs.cn/article34/gjsepe.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供自適應(yīng)網(wǎng)站、云服務(wù)器、定制開(kāi)發(fā)、網(wǎng)站設(shè)計(jì)公司、商城網(wǎng)站、
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)