Electron Builder打包Vue 3应用白屏问题求助（M1 Mac）

使用Vue 3组合式API开发Electron应用，通过Electron Builder打包后无法正常运行，始终显示白屏，已花费数小时排查仍未解决。设备为Macbook M1，如需更多代码可提供。

已尝试的解决方案 #

• 将websecurity设置为false
• 尝试多种页面加载方式，例如mainWindow.loadFile('dist/AppName/index.html')
• 为Vue Router配置Hash模式：

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  mode: 'hash',
  routes: [...

报错信息 #

‘Not allowed to load local resources’

相关代码 #

Main.js #

const createWindow = () => {
  // Create the browser window.
  mainWindow = new BrowserWindow({
    width: 1080,
    height: 750,
    minWidth:1080,
    minHeight:750,
    //icon: "../src/assets/img/img/circle_logo.png",
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      contextIsolation: false
    }
  })

  // and load the index.html of the app.
  mainWindow.loadURL(`file://${__dirname}/dist/index.html`);

// Open the DevTools.
  mainWindow.webContents.openDevTools();

}

Package.json #

{
  "name": "MyApp",
  "version": "0.0.0",
  "main": "main.js",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "electron:start": "electron .",
    "watch:electron": "nodemon --exec electron .",
    "watch": "npm run build && concurrently \"npm run watch:electron\"",
    "start": "electron main.js",
    "package": "electron-builder"
  },
  "build": {
    "appId": "com.myapp.app",
    "mac": {
      "target": "dmg",
      "icon": "..."
    }, 
        "files": [
        "dist"
    ]

  },

补充疑问 #

尝试在package.json的build字段中添加files数组但无效，怀疑是入口点问题？files应该配置什么内容？

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