解决Electron-Vite构建后HTML资源丢失问题

在使用Electron-Vite构建多页面应用时，开发者可能会遇到构建后HTML文件中缺少script和css资源的问题。本文将深入分析这一问题的原因，并提供完整的解决方案。

问题现象

当使用Electron-Vite构建包含多个HTML入口的应用时，构建后的HTML文件（位于out/renderer目录下）可能会出现资源引用丢失的情况。具体表现为：

1. 构建后的HTML文件中缺少应有的script标签
2. CSS样式资源未被正确引入
3. 虽然开发环境运行正常，但生产构建后功能异常

问题根源

经过分析，这个问题主要源于Rollup配置中的输入路径处理不当。在Electron-Vite项目中，当配置多个HTML入口时，如果直接使用相对路径作为输入配置，Rollup可能无法正确解析资源路径。

解决方案

正确的做法是使用Node.js的path模块解析绝对路径。具体修改如下：

1. 在electron.vite.config.ts中引入path模块
2. 使用resolve方法处理HTML入口路径

import { resolve } from 'path'

// 在renderer配置中修改rollupOptions
build: {
  rollupOptions: {
    input: {
      main: resolve(__dirname, 'src/renderer/main/index.html'),
      set: resolve(__dirname, 'src/renderer/set/index.html')
    }
  }
}

技术原理

这种解决方案有效的根本原因在于：

1. 绝对路径确保了Rollup能够准确定位到源文件位置
2. 避免了相对路径在不同环境下的解析差异
3. 保证了构建过程中资源引用的完整性

最佳实践

对于Electron-Vite多页面应用开发，建议遵循以下规范：

1. 始终使用绝对路径配置入口文件
2. 保持HTML文件与对应资源在同一目录下
3. 使用Vite/Electron-Vite推荐的目录结构
4. 在HTML中正确引用资源（如使用相对路径引用脚本）

总结

通过正确配置Rollup的输入路径，可以解决Electron-Vite构建后HTML资源丢失的问题。这一解决方案不仅适用于当前案例，也适用于大多数基于Vite的多页面应用构建场景。开发者应当重视构建配置中的路径处理，确保开发与生产环境的一致性。