Vite+Electron打包后跨系统无法运行的配置问题

1. 配置Vite生成相对路径 #

在项目根目录的vite.config.js（或vite.config.ts）中，修改base配置为相对路径，让打包后的资源引用不再依赖本地绝对路径：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: './',
  build: {
    outDir: 'dist',
    assetsDir: 'assets'
  }
})

2. 调整Electron主进程的资源加载逻辑 #

在Electron主进程文件（如src/main.js）中，使用应用安装后的实际路径加载index.html，避免硬编码本地路径：

const { app, BrowserWindow } = require('electron')
const path = require('path')

function createWindow () {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  // 根据打包状态选择加载方式
  if (app.isPackaged) {
    mainWindow.loadFile(path.join(app.getAppPath(), 'dist', 'index.html'))
  } else {
    mainWindow.loadURL('http://localhost:5173')
  }
}

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

3. 配置Electron Forge确保资源被打包 #

在forge.config.js中，添加extraResource配置，确保dist目录被包含到安装包中：

module.exports = {
  packagerConfig: {
    extraResource: ['./dist'],
    // 其他打包配置...
  },
  rebuildConfig: {},
  makers: [
    {
      name: '@electron-forge/maker-deb',
      config: {
        // deb打包相关配置...
      }
    }
  ],
  // 其他Forge配置...
}

4. 重新打包验证 #

执行以下命令完成打包：

npm run build
npm run make

配置完成后，打包生成的deb文件在其他系统安装时，会从应用自身的安装目录加载assets下的JS资源，不再依赖本地开发环境的绝对路径。

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