Electron配置及打包

最新推荐文章于 2024-08-05 15:05:01 发布

菜菜的强仔

最新推荐文章于 2024-08-05 15:05:01 发布

阅读量2.5k

点赞数

文章标签： electron 前端 javascript

本文链接：https://blog.csdn.net/m0_75275491/article/details/128228414

版权

本文介绍了如何使用Vite创建一个Electron项目，包括安装必要的依赖、编写main.js文件、配置package.json指令，以及详细步骤进行electron-build打包，解决打包过程中的问题，如在package.json中设置files以指定包含在asar文件中的内容。

摘要由CSDN通过智能技术生成

1.创建一个vite 项目

npm init vite@latest

安装electron

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

3.在根目录下配置一个main.js文件

import { app, BrowserWindow } from 'electron'
import path from 'path'
//app 控制应用程序的事件生命周期。
//BrowserWindow 创建并控制浏览器窗口。
 
let win: BrowserWindow | null;
//定义全局变量获取 窗口实例
 
const createWindow = () => {
    win = new BrowserWindow({
        //
        webPreferences: {
            devTools: true,
            contextIsolation: false,
            nodeIntegration: true
            //允许html页面上的javascipt代码访问nodejs 环境api代码的能力（与node集成的意思）
        }
    })
    if (app.isPackaged) {
        win.loadFile(path.join(__dirname, "../index.html"));
    } else {
//VITE_DEV_SERVER_HOST 如果是undefined 换成  VITE_DEV_SERVER_HOSTNAME
        win.loadURL(`http://${process.env['VITE_DEV_SERVER_HOST']}:${process.env['VITE_DEV