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的訪問(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)目名稱 │ —— 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)文章
Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼
本文主要介紹了Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
基于vue中keep-alive緩存問(wèn)題的解決方法
今天小編就為大家分享一篇基于vue中keep-alive緩存問(wèn)題的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
淺談關(guān)于.vue文件中style的scoped屬性
本篇文章主要主要介紹了淺談關(guān)于.vue文件中style的scoped屬性，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08
最近在學(xué)習(xí)或工作中遇到,把Vue前端項(xiàng)目打包后,要求可以再次修改請(qǐng)求后端接口的基礎(chǔ)地址,下面這篇文章主要給大家介紹了關(guān)于vue前端靈活改變后端地址的兩種方式,需要的朋友可以參考下2024-03-03
這篇文章介紹了Vue.js中v-bind指令的用法，文中通過(guò)示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-03-03
這篇文章主要介紹了Vue手寫(xiě)橫向輪播圖的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
nginx如何配置vue項(xiàng)目history的路由模式(非根目錄)
這篇文章主要介紹了nginx如何配置vue項(xiàng)目history的路由模式(非根目錄),具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
基于vue項(xiàng)目設(shè)置resolves.alias: ''@''路徑并適配webstorm
這篇文章主要介紹了基于vue項(xiàng)目設(shè)置resolves.alias: '@'路徑并適配webstorm,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-12-12
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單的跑馬燈，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
在Vue.js的開(kāi)發(fā)過(guò)程中,組件方法的定義和調(diào)用是非常常見(jiàn)的,有時(shí)候,為了響應(yīng)事件或其他操作,我們需要在組件的方法中使用匿名函數(shù),本文將深入探討如何在Vue組件的方法中加載和使用匿名函數(shù),并提供詳細(xì)的代碼示例和解釋,幫助開(kāi)發(fā)者更好地理解和應(yīng)用這些技術(shù)2024-09-09