Electron JS/Vue Router Packing Not Working with Electron Builder

Question

Hi I have been trying to trouble shoot this problem for hours and can't figure out a solution. I created an Electron App using Vue 3 Composition and now I am trying to use Electron Builder to package it. It is not working at all, I keep getting a white screen. I tried different solutions such as:

1. setting websecurity to false

2. mainWindow.loadFile('dist/AppName/index.html') as well as many other solutions

3. adding Hash to the Vue Router.

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

I cannot figure this out at all. I am using a Macbook M1. If more code needs to be provided let me know.

Any help would be amazing. Thank you.

Edits:

Error: "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"
    ]

  },

Another edit, I'm trying to add files:[] to the build in the package.json although it is not working. Perhaps it is the entry point? What would I put for files

Answer 1

Fixed it. needed to add this to package.json

"directories": {
  "output": "release",
  "buildResources": "dist"
},
"files": [
    "**/*",
    "dist/**/*",
    "!.github",
    "!.vs",
    "!node_modules/*"
]