Vue3 + Vite Web项目 Electron 打包桌面应用程序

在根目录下创建 electron 文件夹

创建 electron/main.js 文件：

// 导入模块
const { app, BrowserWindow ,Menu } = require('electron')
const path = require('path')

// 创建主窗口
const createWindow = () => {
  const mainWindow = new BrowserWindow({
    width: 1440,
    height: 800,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
	    nodeIntegration: true, //开启true这一步很重要,目的是为了vue文件中可以引入node和electron相关的API
      contextIsolation: false, // 可以使用require方法
      enableRemoteModule: true, // 可以使用remote方法
    }
  })
 
  // 和自己本地vue项目启动的地址保持一致
  //mainWindow.loadURL(`http://localhost:5173`)  //本地调试用这个
  mainWindow.loadURL(`https://ai.taxplus101.com`)
}
Menu.setApplicationMenu(null)
// 应用准备就绪，加载窗口
app.whenReady().then(() => {
  createWindow()
 
  // mac 上默认保留一个窗口
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})
 
// 关闭所有窗口 ： 程序退出 ： windows & linux
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

创建 electron/preload.js 文件：

// 所有Node.js API都可以在预加载过程中使用。
// 它拥有与Chrome扩展一样的沙盒。
window.addEventListener('DOMContentLoaded', () => {
	const replaceText = (selector, text) => {
	  const element = document.getElementById(selector)
	  if (element) element.innerText = text
	}
   
	for (const dependency of ['chrome', 'node', 'electron']) {
	  replaceText(`${dependency}-version`, process.versions[dependency])
	}
})

修改 pakeage.json 文件：

添加以下内容：

"main":"electron/main.js"
"electron":"electron ."

如果有： "type": "module" 一定要删除！！！！

否则会报错：

如果运行本地调试，需要先启动本地的 web调试再启动本地 electron调试

打包相关：

一、安装 electron-builder

npm i electron-builder -D

二、修改package.json文件

添加以下内容：

"electron:build": "electron-builder",
 
 
 
"build": {
    "appId": "com.demo.myApp",  //包id 格式:com.xxx.项目名
    "productName": "myApp", // 项目名
    "copyright": "Copyright © 2024 <your-name>", // 版权信息
    "mac": {
      "category": "public.app-category.utilities"
    },
    "nsis": {
      "oneClick": false,
      "allowToChangeInstallationDirectory": true,
      "deleteAppDataOnUninstall": true // 卸载应用清除用户缓存
    },
    "files": [
      "dist/**/*",
      "electron/**/*"
    ],
    "directories": {
      "buildResources": "assets", //静态文件资源获取目录
      "output": "dist_electron" // 打包位置,会新建到项目根目录
    }
  },

三、运行打包命令

如运行遇到无法创建地址错误，请使用管理员终端再次运行

npm run electron:build

打包结果：

参考文章：将web项目打包成electron桌面端教程（二）vue3+vite+ts-CSDN博客

Vue3 + Vite Web项目 Electron 打包桌面应用程序

猜你喜欢