Create multiple windows with different html file using vite-electron-builder - vue.js

Question

I'm working on an app where my main window is type desktop, but opening a new window by clicking a tray opens the same index instead of opening the html file i want. If I add the file link by hardcoding it returns a white screen because vite can not complile vue and ts included in the html file.
I even added it to the input values of vite.config.js
vite.config.js
build: {
sourcemap: true,
target: `chrome${chrome}`,
outDir: 'dist',
assetsDir: '.',
rollupOptions: {
input: {
main: join(PACKAGE_ROOT, 'index.html'),
upload: './upload/upload.html', // file i want to compile with vite to make it work
},
external: [
...builtinModules.flatMap(p => [p, `node:${p}`]),
],
},
emptyOutDir: true,
brotliSize: false,
}
createSecondWindow.ts
async function createSecondWindow() {
const browserUploadWindow = new BrowserWindow({
//skipTaskbar: true,
movable: true,
roundedCorners: true,
titleBarStyle: 'default',
resizable: true,
hasShadow: true,
show: true, // Use 'ready-to-show' event to show window
height: screen.getPrimaryDisplay().size.height-300,
width: screen.getPrimaryDisplay().size.width-300,
minHeight:screen.getPrimaryDisplay().size.height-350,
minWidth:screen.getPrimaryDisplay().size.width-600,
enableLargerThanScreen: true,
webPreferences: {
nativeWindowOpen: true,
webviewTag: false,
preload: join(__dirname, '../../preload/dist/index.cjs'),
},
});
browserUploadWindow.on('ready-to-show', () => {
browserUploadWindow?.show();
if (import.meta.env.DEV) {
browserUploadWindow?.webContents.openDevTools();
}
});
const pageUrl = import.meta.env.DEV && import.meta.env.VITE_DEV_SERVER_URL !== undefined
? import.meta.env.VITE_DEV_SERVER_URL
: new URL('../renderer/dist/upload.html', 'file://' + __dirname).toString();
const uploadUrl = new URL('../renderer/upload/upload.html', 'file://' + __dirname).toString();
await browserUploadWindow.loadURL(uploadUrl);
return browserUploadWindow;
}
mainWindow.ts
async function createWindow() {
//browserWindow.setVisibleOnAllWorkspaces(true)
// let the dock be on top of the window
const browserWindow = new BrowserWindow({
type: 'desktop',
skipTaskbar: true,
roundedCorners: false,
titleBarStyle: 'hidden',
resizable: false,
hasShadow: false,
show: false, // Use 'ready-to-show' event to show window
height: screen.getPrimaryDisplay().size.height,
width: screen.getPrimaryDisplay().size.width,
enableLargerThanScreen: true,
webPreferences: {
nativeWindowOpen: true,
webviewTag: false,
preload: join(__dirname, '../../preload/dist/index.cjs'),
},
});
browserWindow.on('ready-to-show', () => {
browserWindow?.show();
if (import.meta.env.DEV) {
browserWindow?.webContents.openDevTools();
}
});
const pageUrl = import.meta.env.DEV && import.meta.env.VITE_DEV_SERVER_URL !== undefined
? import.meta.env.VITE_DEV_SERVER_URL
: new URL('../renderer/dist/index.html', 'file://' + __dirname).toString();
await browserWindow.loadURL(pageUrl);
return browserWindow;
}````