vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vite electron构建桌面应用

vite结合electron构建前端桌面应用程序

作者：aibujin

本文主要介绍了vite结合electron构建前端桌面应用程序，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一、创建 vite 项目

npm

npm create vite@latest

yarn

yarn create vite

选择是否继续

Need to install the following packages:
  create-vite@3.2.1
Ok to proceed? (y) y

项目名称

Project name: » vite-project

选择框架

Select a framework: » - Use arrow-keys. Return to submit.
>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others

选择项目语言

Select a framework: » - Use arrow-keys. Return to submit.
>   Vanilla
    Vue
    React
    Preact
    Lit
    Svelte
    Others

项目构建成功，根据提示进入项目目录，安装依赖

Done. Now run:
  cd vite-project
  npm install
  npm run dev

二、构建 Electron 项目

electron 官网：https://www.electronjs.org/zh/docs/latest/

vite-plugin-electron ：https://github.com/electron-vite/vite-plugin-electron

安装依赖（electron 安装比较慢，耐心等待即可）

npm install electron -D
npm install vite-plugin-electron -D

编写 Electron 入口文件，创建 electron/main.ts，与 src 目录同级

// app 控制应用程序的事件生命周期（相当于应用程序）
// BrowserWindow 创建并控制浏览器窗口（相当于打开桌面弹框）
import { app, BrowserWindow, Menu } from 'electron'
import path from 'path'
// 定义全局变量，获取窗口实例
let win: BrowserWindow | null;
/**
 * 创建一个窗口
 */
const createWindow = () => {
    win = new BrowserWindow({
        width: 1200,
        height: 800,
        center: true,
        // autoHideMenuBar: true,
        backgroundColor: 'rgb(0, 0, 0)',
        webPreferences: {
            devTools: true,
            // 集成网页和 Node.js，也就是在渲染进程中，可以调用 Node.js 方法
            nodeIntegration: true,
            contextIsolation: false,
        }
    })
    // You can use `process.env.VITE_DEV_SERVER_URL` when the vite command is called `serve`
    if (process.env.VITE_DEV_SERVER_URL) {
        win.loadURL(process.env.VITE_DEV_SERVER_URL)
    } else {
        // Load your file
        win.loadFile(path.resolve(__dirname, '../dist/index.html'));
    }
    // 关闭窗口时就关闭程序，避免占用过多资源
    win.on("close", () => {
        win = null
    })
}
// 自定义菜单
const createMenu = () => {
    const Menus: any = [
        {
            label: 'Files',
            submenu: [
                {
                    label: '网页版',
                    role: 'help',
                    submenu: [{
                        label: '网页版',
                        click: function () {
                            alert('网页版')
                        }
                    }]
                },
                {
                    label: '帮助',
                    role: 'help',
                    submenu: [{
                        label: '帮助文档',
                        click: function () {
                            alert('帮助文档')
                        }
                    }]
                }
            ]
        }
    ];
    const mainMenu = Menu.buildFromTemplate(Menus);
    Menu.setApplicationMenu(mainMenu);
}
// 初始化app（在 Electron 完成初始化时触发），挂载上面创建的 桌面应用程序窗口
app.whenReady().then(() => {
    createWindow()
    // createMenu()
})

在 vite.config.ts 中，配置 Electron 入口文件（注意：vite-plugin-electron 版本不同，electron 配置可能不一样）

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import electron from 'vite-plugin-electron'
// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        vue(),
        electron({
            entry: 'electron/main.ts',
        }),
    ],
})

在 package.json 中，增加 main 字段，去掉 type 字段

🚨 默认情况下, electron 文件夹下的文件将会被构建到 dist-electron（注意：vite-plugin-electron 版本不同，构建的文件夹也可能不同）

🚨 目前, Electron 尚未支持 “type”: “module”，需要去掉 type 字段

"main": "dist-electron/main.js",

运行项目

npm run dev

vite + electron 构建前端桌面应用程序

三、打包 Electron 桌面程序

安装打包依赖 electron-builder

npm install electron-builder -D

在 package json 中，配置 build 命令

"build": "vue-tsc --noEmit && vite build && electron-builder"

修改 package.json，增加 electron-builder 相关配置

🚨 注意：下面 build/files中，dist/**/* 是项目打包文件，dist-electron/**/* 是 Electron 入口文件，插件版本不同所构建的文件夹可能不同 

"build": {
    "appId": "com.electron.desktop",
    "productName": "electron",
    "asar": true,
    "copyright": "Copyright © 2022 electron",
    "directories": {
        "output": "release/"
    },
    "files": [
        "dist/**/*",
        "dist-electron/**/*"
    ],
    "mac": {
        "artifactName": "${productName}_${version}.${ext}",
        "target": [
            "dmg"
        ]
    },
    "win": {
        "target": [
            {
                "target": "nsis",
                "arch": [
                    "x64"
                ]
            }
        ],
        "artifactName": "${productName}_${version}.${ext}"
    },
    "nsis": {
        "oneClick": false,
        "perMachine": false,
        "allowToChangeInstallationDirectory": true,
        "deleteAppDataOnUninstall": false
    },
    "publish": [
        {
            "provider": "generic",
            "url": "http://127.0.0.1:8080"
        }
    ],
    "releaseInfo": {
        "releaseNotes": "版本更新的具体内容"
    }
},

执行打包，安装应用

npm run build

🚨 解决办法：关闭电脑管家、360或者别的杀毒软件即可；

打包成功后，生成的文件都放到了 release 目录下（之前在 package.json 里是这么配置的）

点击 electron_0.0.0.exe ，安装即可；

安装之后运行程序，页面没有出来，控制台有错

看到这个错首先我们找到 release/win-unpacked/resources，找到 app.asar 然后解压 app.asar

安装 asar 工具

npm install -g asar

asar 的压缩与解压

解压：asar extract app.asar app

asar extract 源app.asar文件 目标解压文件夹

压缩：asar pack app app.asar

asar pack 源解压文件夹 目标asar压缩文件名(app.asar)

解压之后可以看到 dist-electron 和 dist 是同一级的，修改 electron/main.ts 即可

win.loadFile(path.resolve(__dirname, '../dist/index.html'));

四、项目地址

项目地址：https://github.com/aibuijn/vite-electron

到此这篇关于vite结合electron构建前端桌面应用程序的文章就介绍到这了,更多相关vite electron构建桌面应用程序内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文