这篇文章主要介绍“Vue怎么使用electron生成桌面应用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue怎么使用electron生成桌面应用”文章能帮助大家解决问题。
安装依赖
安装指定版本 此时日期为 2023-04-11
npm i electron@24.0.0 -D
npm i vite-plugin-electron@0.11.1 -D
npm i electron-builder@23.6.0 -D
npm i cross-env@7.0.3
针对项目由 vite 创建的 vue3 项目
修改 vite.config.ts
变动语句
vite.config.ts 变动
import electron from 'vite-plugin-electron'electron({ entry: "dist-electron/index.js"})放入语句
vite.config.ts 放入
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: "dist-electron/index.js" }) ],})修改完成后，会自动在项目根目录出现 dist-electron 文件夹，文件夹内有一个文件 index.js
如果没有自动出现，那就手动创建
修改 index.js
index.js
import { app, BrowserWindow } from 'electron'import path from 'path'// app 控制应用程序的事件生命周期。// BrowserWindow 创建并控制浏览器窗口。let win;// 定义全局变量获取 窗口实例const createWindow = () => { win = new BrowserWindow({ webPreferences: { devTools: true, contextIsolation: false, nodeIntegration: true // 允许html页面上的javascipt代码访问nodejs 环境api代码的能力（与node集成的意思） } }) if (process.env.NODE_ENV != 'development') { win.loadFile(path.join(__dirname, "../dist/index.html")); } else { // vite-plugin-electron@0.11.1版本使用以下 win.loadURL(`${process.env['VITE_DEV_SERVER_URL']}`) }}//在Electron完成初始化时被触发app.whenReady().then(createWindow)修改 package.json
删除 “type”: “module”
“name” 同级添加 “main”: “dist-electron/index.js”
,将 script 中的 dev 指令修改为 cross-env NODE_DEV=development vite
将 script 中的 build 指令修改为 vue-tsc --noEmit && vite build && electron-builder
将以下添加到 “name” 同级
"build": { "appId": "com.electron.desktop", "productName": "electron", "asar": true, "copyright": "Copyright © 2023 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:8086" } ], "releaseInfo": { "releaseNotes": "版本更新的具体内容" } }本地测试
npm run dev
会自动打开
打包成exe文件
npm run build
输出在项目根目录下新建的文件夹 release 中，双击 exe 文件进行安装就可以打开了
关于“Vue怎么使用electron生成桌面应用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注编程网行业资讯频道，小编每天都会为大家更新不同的知识点。
