怎么使用vue3+ts+vite+electron搭建桌面应用
时间：2023-05-15 02:40
vite： ^4.2.0 为了保证electron能够正常安装，在 安装electron相关的包 创建electron主进程文件main.ts: /src/main/main.ts 调整启动命令：package.json 1 打包vue vite.config.ts调整 src/main/main.ts 调整 为了清晰的区分electron的主进程和渲染进程，我们可以将vue相关的文件规整到render的目录下 如果项目使用了vue-router，我们在build后运行exe，会发现首页 以上就是怎么使用vue3+ts+vite+electron搭建桌面应用的详细内容，更多请关注Gxl网其它相关文章！一、版本背景介绍
vue: ^3.2.47
ts: ^4.9.3
electron: ^23.2.1二、过程
1. 搭建vite+vue-ts的项目
yarn create vite@ vuets_electron --template vue-tscd ./vuets_electronyarn install && yarn dev
2. 接入electron
vuets_electron 的根目录下创建.npmrc, 设置一下electron的镜像源# /.npmrc ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/
# electronyarn add -D electron# electron-builder 用于打包yarn add -D electron-builder# electron-devtools-installeryarn add -D electron-devtools-installer# 为了保证后续步骤，这里在安装一个concurrently,yarn add concurrently
3. electron启动
const { app, BrowserWindow } = require('electron')const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, // webPreferences: { // preload: path.join(__dirname, 'preload.js') // } }) // 加载vue url视本地环境而定，如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()})
1 vue 启动： yarn dev
2 那electron要如何启动呢? 从electron官方文档我们可以清楚的知道，electron可以加载URL，那么我们就可以在启动electron之前启动vue，然后将vue的访问入口接入electron，在同时启动electron不就可以了吗~
3 千万不要忘了设置入口文件哟~~~{ "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开发启动命令 "electron:dev": "concurrently "yarn dev" "electron ."" // +++ } // ... // 其它配置}到这，我们运行 yarn electron:dev 就能看到熟悉的electron页面了4. electron打包
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 ."", // +++ 设置electron打包命令 "electron:build": "yarn build && electron-builder" // +++ } // ... // 其它配置 // +++ 打包相关设置 "build": { "appId": "ink.bennent_g.demo", "directories": { "output": "output" }, // 其它的build相关设置，可参考 electron-builder官方文档 }}import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// https://vitejs.dev/config/export default defineConfig({ plugins: [ vue(), ], // +++ base: './', // +++ server: { port: 3000 } // ...})const { app, BrowserWindow } = require('electron')const createWindow = () => { const win = new BrowserWindow({ width: 800, height: 600, // webPreferences: { // preload: path.join(__dirname, 'preload.js') // } }) // +++ 开发环境与打包后加载vue入口文件有所区别 // 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. 项目目录梳理
移动vue相关文件，请务必注意vue相关引用的路径问题
如下是本人的目录结构，可参考vuets_electron // 项目名称│ —— node_modules │ —— dist // vue打包目录│ —— output // electron打包目录│ —— public│ —— .npmrc│ —— package.json│ —— vite.config.ts│ —— tsconfig.json│└─── src // 开发相关目录│ │ main.ts // vue默认入口文件│ └───assets // 静态资源目录│ │ ...│ └───main // electron主进程目录│ │ main.ts│ └───render // 渲染进程目录即vue相关目录结构│ │ router│ │ views│ │ ...
至此 我们的electron开发框架就搭建完成了，可以愉快的撸代码了~三、打包首页加载空白问题(补充)
白屏，这是因为 electron 仅支持hash模式，如果使用了createWebHistory()创建路由，可更改为createWebHashHistory()即可const router = createRouter({ // history: createWebHistory(), // 修改为 history: createWebHashHistory(), routes})
