vue3+ts+vite+electron搭建桌面應(yīng)用的過(guò)程
提示：文章寫(xiě)完后，目錄可以自動(dòng)生成，如何生成可參考右邊的幫助文檔
vue3+ts+vite+electron搭建桌面應(yīng)用
前言
提示：開(kāi)發(fā)桌面應(yīng)用，就不得不提Electron ，之前使用vue+electron ,官方提供了Vue CLI Plugin Electron Builder,但是也只能使用了vue-cli(而且使用vue-cli-electron-builder構(gòu)建，發(fā)現(xiàn)最新版本也才13,Electron最新版本都23了??????),隨著vite的崛起以及ts,我們也需要與時(shí)俱進(jìn)不是嗎??????
一、版本背景介紹
vite： ^4.2.0
vue: ^3.2.47
ts: ^4.9.3
electron: ^23.2.1
二、過(guò)程
1. 搭建vite+vue-ts的項(xiàng)目
yarn create vite@ vuets_electron --template vue-ts cd ./vuets_electron yarn install && yarn dev
2. 接入electron
為了保證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
詳情可參考 concurrently
3. electron啟動(dòng)
創(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的訪(fǎng)問(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è)面了
4. electron打包
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()
})
5. 項(xiàng)目目錄梳理
為了清晰的區(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ā)框架就搭建完成了，可以愉快的擼代碼了~
三、打包首頁(yè)加載空白問(wèn)題(補(bǔ)充)
如果項(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
})到此這篇關(guān)于vue3+ts+vite+electron搭建桌面應(yīng)用的文章就介紹到這了,更多相關(guān)vue3+ts+vite+electron桌面應(yīng)用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
在vue中實(shí)現(xiàn)低代碼組件參數(shù)配置的流程步驟
這篇文章主要介紹了在vue中實(shí)現(xiàn)低代碼組件參數(shù)配置的流程步驟，文中的代碼示例講解的非常詳細(xì)，對(duì)我們的學(xué)習(xí)或工作有一定的參考價(jià)值,需要的朋友可以參考下2023-07-07
今天小編就為大家分享一篇vue-自定義組件傳值的實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue 子組件和父組件傳值的示例，幫助大家更好的理解和學(xué)習(xí)vue，感興趣的朋友可以了解下2020-09-09
這篇文章主要介紹了Vue 之孫組件向爺組件通信的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue-router不允許導(dǎo)航到當(dāng)前位置(/path)錯(cuò)誤原因以及修復(fù)方式
本文主要介紹了Vue-router不允許導(dǎo)航到當(dāng)前位置(/path)錯(cuò)誤原因以及修復(fù)方式，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue使用NProgress實(shí)現(xiàn)頁(yè)面頂部的進(jìn)度條顯示效果
這篇文章主要介紹了vue Nprogress頁(yè)面頂部進(jìn)度條功能實(shí)現(xiàn),NProgress是頁(yè)面跳轉(zhuǎn)是出現(xiàn)在瀏覽器頂部的進(jìn)度條，本文通過(guò)實(shí)例代碼給大家講解，需要的朋友可以參考下2022-12-12
vue中el-table單元格復(fù)制功能實(shí)現(xiàn)
這篇文章主要介紹了vue中el-table單元格復(fù)制功能實(shí)現(xiàn),本文給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
這篇文章主要為大家介紹了Vue的列表渲染，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2021-11-11
解決element DateTimePicker+vue彈出框只顯示小時(shí)
這篇文章主要介紹了解決element DateTimePicker+vue彈出框只顯示小時(shí)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
這篇文章主要為大家介紹了使用github部署前端vue項(xiàng)目過(guò)程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06