如何使用vue3+ts+vite+electron搭建桌面应用

本文小编为大家详细介绍“如何使用vue3+ts+vite+electron搭建桌面应用”，内容详细，步骤清晰，细节处理妥当，希望这篇“如何使用vue3+ts+vite+electron搭建桌面应用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。

一、版本背景介绍

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 

.npmrc

# /.npmrc 
ELECTRON_MIRROR=https://npmmirror.com/mirrors/electron/
ELECTRON_BUILDER_BINARIES_MIRROR=https://npmmirror.com/mirrors/electron-builder-binaries/

安装electron相关的包

# electron
yarn add -D electron
# electron-builder 用于打包
yarn add -D electron-builder
# electron-devtools-installer
yarn add -D electron-devtools-installer
# 为了保证后续步骤，这里在安装一个concurrently,
yarn add concurrently

3. electron启动

创建electron主进程文件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视本地环境而定，如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()
})

调整启动命令：package.json
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打包

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 ."",
        // +++ 设置electron打包命令
        "electron:build": "yarn build && electron-builder"
        // +++
    }
    // ...
    // 其它配置
    // +++ 打包相关设置
    "build": {
        "appId": "ink.bennent_g.demo",
        "directories": {
            "output": "output"
        },
        // 其它的build相关设置，可参考 electron-builder官方文档
    }
}

vite.config.ts调整

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 调整

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. 项目目录梳理

为了清晰的区分electron的主进程和渲染进程，我们可以将vue相关的文件规整到render的目录下

移动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开发框架就搭建完成了，可以愉快的撸代码了~

三、打包首页加载空白问题(补充)

如果项目使用了vue-router，我们在build后运行exe，会发现首页

白屏

hash

createWebHistory()

createWebHashHistory()

const router = createRouter({
    // history: createWebHistory(),
    // 修改为
    history: createWebHashHistory(),
    routes
})