Electron打包时未复制额外HTML文件的问题解决咨询

1. 配置package.json的files字段 #

Electron Forge打包时会依据package.json的files字段确定要纳入打包的文件。你的gate相关文件都在src/main目录下，需要将该目录明确添加到打包列表中。

打开项目根目录的package.json，新增或修改files字段：

"files": [
  "src/main/**/*",
  "src/render/**/*"
  // 按需添加其他需要打包的文件/目录，比如静态资源文件夹等
]

该配置会将src/main下所有文件（包括gate.html、gate.js、gate.css）全部纳入打包范围。

2. 修正文件加载路径 #

打包后__dirname的指向可能因Electron Forge的打包模式发生变化，建议用path.join构建路径，避免字符串拼接导致的路径错误。修改main.ts中的代码：

const gateCreateWindowWithLicense = async (createWindow: any) => {
  const path = require('path');

  gateWindow = new BrowserWindow({
    resizable: false,
    frame: false,
    width: 420,
    height: 200,
    webPreferences: {
      preload: path.join(__dirname, 'gate.js'),
      devTools: isDebug,
    },
  });
  // 用path.join规范HTML文件路径
  gateWindow.loadFile(path.join(__dirname, 'gate.html'));
}

path.join会自动处理不同系统的路径分隔符，避免手动拼接斜杠引发的问题。

3. 适配Webpack打包配置（若使用@electron-forge/plugin-webpack） #

如果你的项目用了Webpack插件打包，需要确保静态文件未被排除。在主进程的Webpack配置文件（通常是webpack.main.config.js）中，可借助copy-webpack-plugin手动复制gate相关文件到输出目录：

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  // 其他已有配置
  plugins: [
    new CopyWebpackPlugin({
      patterns: [
        { from: './src/main/gate.html', to: './' },
        { from: './src/main/gate.css', to: './' },
        { from: './src/main/gate.js', to: './' },
      ]
    })
  ]
};

这一步会在Webpack编译时将指定文件复制到主进程输出目录，确保打包后文件位置正确。

4. 验证打包结果 #

执行打包命令后，查看打包产物（比如AppImage解压后的resources/app目录），确认gate.html、gate.js、gate.css是否存在。若文件已存在，再次运行应用即可解决找不到文件的问题。

内容的提问来源于stack exchange，提问作者DrTchocky