这篇文章主要介绍“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 变动
计算
安全
数据库
网络和加速
企业服务
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
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)删除 “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
会自动打开
npm run build
输出在项目根目录下新建的文件夹 release 中，双击 exe 文件进行安装就可以打开了
关于“Vue怎么使用electron生成桌面应用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注亿速云行业资讯频道，小编每天都会为大家更新不同的知识点。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://blog.csdn.net/shaoyahu/article/details/130171017
