Electron JS/Vue Router Packing Not Working with Electron Builder

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