Electron-Vite项目中加载SVG图标的最佳实践

在Electron-Vite项目中加载SVG图标是一个常见需求，特别是在开发地图应用时需要使用自定义标记图标。本文将详细介绍在Electron-Vite架构下正确加载和使用SVG图标的方法。

资源加载的基本原理

Electron-Vite项目采用了Vite作为构建工具，其资源处理方式与传统的Webpack有所不同。Vite对静态资源有着独特的处理机制，特别是在开发环境和生产环境下表现不同。

渲染进程中的SVG加载

在渲染进程（前端部分）中，Vite提供了几种处理静态资源的方式：

1. 直接导入：可以通过ES模块导入SVG文件

import markerIcon from './assets/marker.svg'

2. 公共目录：将SVG文件放在public目录下，然后直接通过相对路径引用

placemarkAttributes.imageSource = '/marker.svg'

3. URL构造：使用Vite的特殊查询参数

placemarkAttributes.imageSource = new URL('./assets/marker.svg', import.meta.url).href

主进程中的SVG加载

在主进程（Electron部分）中，需要使用特殊的资源处理方式：

1. 使用asset模块：通过?asset后缀明确指定资源类型

placemarkAttributes.imageSource = 'assets/marker.svg?asset'

2. 路径处理：结合path模块构建绝对路径

import path from 'path'
placemarkAttributes.imageSource = path.join(__dirname, 'assets', 'marker.svg')

跨环境兼容性解决方案

为了解决开发环境和生产环境路径不一致的问题，可以采用以下策略：

1. 环境变量判断：根据当前环境选择不同的加载方式

const isProduction = import.meta.env.PROD
placemarkAttributes.imageSource = isProduction 
  ? path.join(__dirname, 'assets', 'marker.svg')
  : '/marker.svg'

2. 统一资源管理：创建一个专门的资源加载工具函数

function loadAsset(path) {
  if (import.meta.env.PROD) {
    return `file://${path.join(__dirname, 'assets', path)}`
  } else {
    return `/${path}`
  }
}

实际应用示例

在地图应用中加载卫星图标的完整示例：

// 统一资源加载函数
function getAssetPath(relativePath) {
  if (import.meta.env.DEV) {
    return new URL(`../../resources/${relativePath}`, import.meta.url).href
  } else {
    const path = require('path')
    return path.join(__dirname, '../../resources', relativePath)
  }
}

// 使用示例
placemarkAttributes.imageSource = getAssetPath('satellite.svg')
const satellitePlacemark = new WorldWind.Placemark(
  satellitePosition, 
  true, 
  placemarkAttributes
)
placemarkLayer.addRenderable(satellitePlacemark)
wwd.redraw()

最佳实践建议

1. 资源目录结构：建议将所有静态资源统一放在src/assets或public目录下
2. 命名规范：使用清晰的命名规则，如marker-{size}-{color}.svg
3. 缓存控制：在生产构建时为资源文件名添加hash以避免缓存问题
4. 类型安全：在TypeScript项目中为SVG导入添加类型声明
5. 性能优化：对于频繁使用的小图标，考虑使用雪碧图或内联SVG

通过遵循这些实践，可以确保SVG图标在Electron-Vite项目的所有环境和构建模式下都能正确加载和显示。