如何使用vue3+ts+vite+electron搭建桌面應(yīng)用
本文小編為大家詳細(xì)介紹“如何使用vue3+ts+vite+electron搭建桌面應(yīng)用”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“如何使用vue3+ts+vite+electron搭建桌面應(yīng)用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。
成都創(chuàng)新互聯(lián)公司專注于臨翔網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供臨翔營銷型網(wǎng)站建設(shè)，臨翔網(wǎng)站制作、臨翔網(wǎng)頁設(shè)計、臨翔網(wǎng)站官網(wǎng)定制、微信小程序開發(fā)服務(wù)，打造臨翔網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供臨翔網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。
一、版本背景介紹
vite： ^4.2.0
vue: ^3.2.47
ts: ^4.9.3
electron: ^23.2.1
二、過程
1. 搭建vite+vue-ts的項目
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ù)步驟，這里在安裝一個concurrently, yarn add concurrently
3. electron啟動
創(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)整啟動命令：package.json
1 vue 啟動： yarn dev
2 那electron要如何啟動呢? 從electron官方文檔我們可以清楚的知道，electron可以加載URL，那么我們就可以在啟動electron之前啟動vue，然后將vue的訪問入口接入electron，在同時啟動electron不就可以了嗎~
3 千萬不要忘了設(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開發(fā)啟動命令
"electron:dev": "concurrently \"yarn dev\" \"electron .\""
// +++
}
// ...
// 其它配置
}到這，我們運(yùn)行 yarn electron:dev 就能看到熟悉的electron頁面了
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')
// }
})
// +++ 開發(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. 項目目錄梳理
為了清晰的區(qū)分electron的主進(jìn)程和渲染進(jìn)程，我們可以將vue相關(guān)的文件規(guī)整到render的目錄下
移動vue相關(guān)文件，請務(wù)必注意vue相關(guān)引用的路徑問題
如下是本人的目錄結(jié)構(gòu)，可參考
vuets_electron // 項目名稱 │ —— node_modules │ —— dist // vue打包目錄 │ —— output // electron打包目錄 │ —— public │ —— .npmrc │ —— package.json │ —— vite.config.ts │ —— tsconfig.json │ └─── src // 開發(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開發(fā)框架就搭建完成了，可以愉快的擼代碼了~
三、打包首頁加載空白問題(補(bǔ)充)
如果項目使用了vue-router，我們在build后運(yùn)行exe，會發(fā)現(xiàn)首頁
白屏，這是因為 electron 僅支持hash模式，如果使用了createWebHistory()創(chuàng)建路由，可更改為createWebHashHistory()即可
const router = createRouter({
// history: createWebHistory(),
// 修改為
history: createWebHashHistory(),
routes
})讀到這里，這篇“如何使用vue3+ts+vite+electron搭建桌面應(yīng)用”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點(diǎn)還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
當(dā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ù)器、定制開發(fā)、網(wǎng)站設(shè)計公司、商城網(wǎng)站、
聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)
- 電子商務(wù)網(wǎng)站設(shè)計該如何制作 2021-05-24
- 電子商務(wù)網(wǎng)站建設(shè)需求和問題 2022-10-01
- 電子商務(wù)與網(wǎng)絡(luò)營銷有哪些相同之處？ 2015-11-09
- 電子商務(wù)網(wǎng)站建設(shè)主要六大功能 2017-01-23
- 電子商務(wù)網(wǎng)站建設(shè)的注意細(xì)節(jié)有哪些？ 2016-08-11
- 上海網(wǎng)站建設(shè):電子商務(wù)網(wǎng)站如何做到精準(zhǔn)營銷？ 2021-07-16
- 電子商務(wù)“帝國主義” 2022-05-09
- 企業(yè)建設(shè)電子商務(wù)網(wǎng)站的目的是什么呢？ 2020-07-07
- 電子商務(wù)網(wǎng)站設(shè)計應(yīng)避免的5大錯誤 2022-10-01
- 成都網(wǎng)站建設(shè)分享在國外平衡電子商務(wù)網(wǎng)站的營銷和轉(zhuǎn)換怎么做的？ 2022-08-23
- 電子商務(wù)的SEO圍繞這5個方面 2015-01-04
- 電子商務(wù)網(wǎng)站建設(shè)的10 個易用性規(guī)則 2014-07-31