devbox
正经夜光杯
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Electron Forge + Vite 项目 Electron 静态资源处理

作者：正经夜光杯 | 2024-08-11 15:58:50

赞

踩

electron 静态资源

1. 教程前提

该教程依赖于这篇教程：Electron Forge + Vite + Vue3 + Ts 搭建 Electron 项目到应用打包

2. 参考资料

npm官网： rollup-plugin-copy

3. 静态资源处理机制差异

Vite 在打包应用时主要处理的是基于 Web 技术的项目，其工作方式和 Electron 在处理文件路径上有所不同。这种差异主要体现在以下几个方面：

1. 路径解析机制的差异
  • Vite： 作为一个为现代 Web 应用设计的构建工具，Vite 通常处理的是基于 HTTP 服务器的资源路径。它假设所有资源都可以通过相对于应用的基本 URL 或端口的路径来访问。这意味着，Vite 会扫描源代码中的导入语句，查找以 HTTP URL 形式指定的资源。
  • Electron： Electron 应用通常会访问文件系统中的资源，使用的是文件系统的绝对路径或相对于当前文件的路径。这使得 Electron 可以加载本地的文件和资源，而不依赖于 Web 服务器。
2. 资源引用和打包
  • 在 Vite 打包时，它只会包括那些被静态分析到的资源文件（例如 JavaScript、CSS、图片文件等），这些文件通常是通过相对路径或模块解析方式引用的。
  • Electron 中使用的大多都是系统路径（例如通过 __dirname 或 process.resourcesPath 生成的路径），这些路径在 Vite 的打包过程中是无法被正确识别的。

在 Vite 不支持指定将某个目录打包至指定编译目录的情况下，问题逐渐变得复杂化（Forge 也没找到相关的功能）。

4. 解决办法

  1. public 公共目录
    public 是一个特殊的目录，Vite 会将这个目录里的静态资源一起输出到 web 编译目录与 Electron 编译目录，资源双份，但不失为一种解决办法。
    不是很推荐这个办法，所以我直接摸了。

  2. rollup-plugin-copy 插件
    这是一个比较推荐的方案，“复制文件和文件夹”。

    a. 安装 rollup-plugin-copy

    npm install rollup-plugin-copy -D

    b. 配置 vite.main.config.ts 文件

    import copy from 'rollup-plugin-copy'

plugins: [
	copy({
    	targets: [
       		{
       			// 要进行复制的目录或文件
       			src: 'static', 
       			// 目标位置
       			dest: '.vite/build'
       		},
     	]
   })
]

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14

    vite.main.config.ts 文件完整内容：

    import type { ConfigEnv, UserConfig } from 'vite';
import { defineConfig, mergeConfig } from 'vite';
import { getBuildConfig, getBuildDefine, external, pluginHotRestart } from './vite.base.config';

// 引入 rollup-plugin-copy 插件
import copy from 'rollup-plugin-copy'

// https://vitejs.dev/config
export default defineConfig((env) => {
  const forgeEnv = env as ConfigEnv<'build'>;
  const { forgeConfigSelf } = forgeEnv;
  const define = getBuildDefine(forgeEnv);
  const config: UserConfig = {
    build: {
      lib: {
        entry: forgeConfigSelf.entry!,
        fileName: () => '[name].js',
        formats: ['cjs'],
      },
      rollupOptions: {
        external,
      }
    },
    plugins: [
      pluginHotRestart('restart'),
      copy({
        targets: [
          { 
            // 要进行复制的目录或文件
            src: 'static',
            // 目标位置
            dest: '.vite/build' 
          },
        ]
      })
    ],
    define,
    resolve: {
      // Load the Node.js entry.
      mainFields: ['module', 'jsnext:main', 'jsnext'],
    },
  };

  return mergeConfig(getBuildConfig(forgeEnv), config);
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45

    这样 static 静态资源目录就会被打包到 Electron 的编译目录内，也不会在 web 编译目录打包它。

    在这里插入图片描述

    c. 编写系统托盘，测试结果
    在项目根目录创建一个 electron 目录，在这个目录里创建一个 Tray.ts 文件，用于编写系统托盘按钮逻辑，在 src/main.ts 中引用托盘内容。Electron Forge 在编译后会将 Tray.ts 合并到 main.js 中，所以我们就以 main.js 的编译位置为路径锚点，进入与其保持同级的 static 目录里获取静态资源。

    在项目根目录创建一个 static 文件夹，在里面放置图片文件，例如 electron.png：

    在这里插入图片描述

    Tray.ts 内容：

    import { app, BrowserWindow, Tray, Menu, nativeImage } from 'electron';
import path from 'path';

// 窗体对象
let win: BrowserWindow;

// 托盘菜单
const contextMenu = Menu.buildFromTemplate([
    { label: '显示主界面', click: () => { win.show() } },
    { label: '退出应用', click: () => { app.quit() } }
])
// 创建系统托盘
function createTray(w: BrowserWindow) {
	// 获取窗体对象
    win = w;
    // 获取 static 下的图标文件，创建图标对象
    const icon = nativeImage.createFromPath(path.join(__dirname, 'static', 'electron.png'));
    // 系统托盘
    const concrete = new Tray(icon);
    concrete.setContextMenu(contextMenu);
    concrete.setToolTip('工具组');
    // 点击托盘图标显示主窗口
    concrete.on('click', () => {
        win.show();
    });
    return concrete;
}

export default createTray;

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29

    main.ts 内容：
    main.ts 位于 src 目录下，Tray.ts 位于 src 同级目录的 electron 目录下。

    import { app, BrowserWindow, Tray } from 'electron';
import path from 'path';
// 这个用于存放 ipcMain 进程通信，在这篇教程中并没有进行描述
import ipceventmount from '../electron/Ipcevent'
// 引入 Tray.ts 系统托盘
import createTray from '../electron/Tray'

// 窗体对象
let win: BrowserWindow;
// 系统托盘
let concrete: Tray;

if (require('electron-squirrel-startup')) {
  app.quit();
}

const createWindow = () => {
  // 创建并获取 BrowserWindow 对象
  win = new BrowserWindow({
    autoHideMenuBar: true,
    frame: false,
    width: 1000,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })
  
  if (MAIN_WINDOW_VITE_DEV_SERVER_URL) {
    win.loadURL(MAIN_WINDOW_VITE_DEV_SERVER_URL);
  } else {
    win.loadFile(path.join(__dirname, `../renderer/${MAIN_WINDOW_VITE_NAME}/index.html`));
  }
}

app.whenReady().then(() => {
  createWindow();
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
            createWindow();
            ipceventmount(win);
        }
    })
    if (require('electron-squirrel-startup')) app.quit();
    ipceventmount(win);
}).then(() => {
  /*
  在这里创建系统托盘
  */
  concrete = createTray(win);
})

// 全部窗口关闭时，退出应用
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    • 47
    • 48
    • 49
    • 50
    • 51
    • 52
    • 53
    • 54
    • 55
    • 56
    • 57
    • 58
    • 59
    • 60
    • 61
    • 62
    • 63
    • 64

    app.whenReady() 得到一个当 Electron 已初始化后 fulfill 的 Promise 对象，
    在第一个 .then 里创建好 BrowserWindow 对象，并将其赋值给 win 对象，
    在第二个 .then 里执行 concrete = createTray(win); 创建并获取到系统托盘对象。

    d. 启动测试

    npm start

    在这里插入图片描述

    e. 目录结构

    root
   L .vite    # 编译目录
   |   L build
   |       L main.js
   |       L preload.js
   |       L static
   |             L electron.png
   L electron
   |   L Tray.ts
   |   L Ipcevent.ts
   L src
   |   L main.ts
   |   L preload.ts
   |   L renderer.ts
   L static
   |   L electron.png

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/正经夜光杯/article/detail/965012
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号