Yarn Workspaces架构下Electron Forge自定义dist目录配置问题

Hey there, let's tackle this dist directory path issue you're facing with Yarn Workspaces and Electron Forge. I've run into similar workspace-related path quirks before, so here's what you can try:

1. Use a standalone Electron Forge config file (most reliable approach) #

Most Electron Forge projects rely on a dedicated forge.config.js (or .ts) file instead of nesting config under package.json's config.forge—this avoids path ambiguity in monorepos. If you don't have one in your packages/app folder, create it and set the build output path directly:

// packages/app/forge.config.js
const path = require('path');

module.exports = {
  packagerConfig: {
    // Keep your existing packager settings here
  },
  rebuildConfig: {},
  makers: [/* Your existing maker configs */],
  // Add this build section to control the dist folder location
  build: {
    outputDir: path.resolve(__dirname, './dist') // Ensures dist lives in packages/app
  }
};

2. Adjust the app-specific package.json config #

If you prefer keeping config in package.json, make sure you're modifying packages/app/package.json (not the root one) and target the build.outputDir property—this controls the intermediate build output (the dist folder from yarn start), whereas packagerConfig.out is for final packaged artifacts like .exe or .app files:

// packages/app/package.json
{
  "name": "your-app-name",
  "version": "1.0.0",
  "config": {
    "forge": {
      "packagerConfig": { /* ... your existing settings */ },
      "build": {
        "outputDir": "./dist"
      },
      // ... rest of your Forge config
    }
  },
  "scripts": {
    "start": "electron-forge start"
  }
}

3. Verify Webpack config (if using the Webpack plugin) #

If you're using Electron Forge's Webpack plugin, double-check your webpack output paths to ensure they're relative to the packages/app directory. For example:

// packages/app/webpack.main.config.js
const path = require('path');

module.exports = {
  // ... other webpack settings
  output: {
    path: path.resolve(__dirname, 'dist'), // Resolves directly to packages/app/dist
    filename: 'main.js'
  }
};

Why your original config didn't work #

The packagerConfig.out setting controls where final packaged app bundles are saved, not the intermediate dist folder created by yarn start. Additionally, if you added the config to the root package.json, Yarn Workspaces might have applied that global config instead of the app-specific one—always keep workspace tooling configs in the package's own directory.

Give these steps a shot, and let me know if you hit any roadblocks!

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