Vue怎么使用electron生成桌面应用

2023-07-06 04:07:17 598人浏览八月长安

摘要

这篇文章主要介绍“Vue怎么使用electron生成桌面应用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue怎么使用electron生成桌面应用”文章能帮助大家解决问题。安装依赖安装指定版本此

这篇文章主要介绍“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": "版本更新的具体内容"    }  }