Vue3+Electron项目资源加载失败：如何修复资源寻址问题？

问题根源：dist/index.html里的资源用了/assets/xxx这种绝对根路径，在Electron的file://协议下，/会指向系统根目录（比如file:///assets/index-xxx.js），而不是dist文件夹下的assets子目录，导致资源找不到。

以下是两种可行的修复方案：

方案一：修改Vue项目的资源路径配置（推荐） #

根据你使用的构建工具，将资源基础路径改为相对路径：

若使用Vite（Vue3主流构建工具） #

在项目根目录的vite.config.js中设置base为./：

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

export default defineConfig({
  base: './', // 关键：设置为相对路径
  plugins: [vue()],
  // 其他原有配置...
})

若使用Vue CLI #

在项目根目录的vue.config.js中设置publicPath为./：

module.exports = {
  publicPath: './' // 关键：设置为相对路径
}

修改完成后重新执行npm run build打包，此时dist/index.html中的资源引用会变成./assets/xxx，以index.html所在目录为基准寻址，就能在Electron中正确加载。

方案二：调整Electron主进程的加载逻辑（备选） #

如果不想修改Vue的打包配置，可以在Electron主进程中，将index.html的加载路径转换为绝对路径，确保资源路径正确解析。

比如主进程（通常是main.js或main.ts）中的加载代码：

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')
    }
  })

  // 加载dist目录下的index.html，使用绝对路径
  mainWindow.loadFile(path.join(__dirname, '../dist/index.html'))
}

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

注意path.join(__dirname, '../dist/index.html')需根据你的项目目录结构调整，确保指向正确的dist/index.html路径。

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