Deploying Vue Vite InertiaJS Laravel application

Hey dear artisans, i need some help here, i deployed MySql on aiven.io and deployed laravel on vercel for testing purposes, when i open the deployed link on vercel, i get error: Unable to locate file in Vite manifest: resources/js/Pages/Home/Index.vue, this file is the first page to show when openning the app, which means that the server doesn't recognize these files located in "Pages" directory, any suggestions ?

json.manifest

"resources/js/app.js": {
    "assets": [
        "assets/Inter-roman.var-vq-Vth46.woff2",
        "assets/Inter-italic.var-4Q_raY2J.woff2",
        "assets/primeicons-5P3lgTyi.eot",
        "assets/primeicons-7GdVu_me.woff2",
        "assets/primeicons-ghXmUeij.woff",
        "assets/primeicons-DQ1UBV8x.ttf",
        "assets/primeicons-bmyWY2nz.svg"
    ],
    "dynamicImports": [
        "resources/js/Pages/Auth/ConfirmPassword.vue",
        "resources/js/Pages/Auth/ForgotPassword.vue",
        "resources/js/Pages/Auth/Login.vue",
        "resources/js/Pages/Auth/Register.vue",
        "resources/js/Pages/Auth/ResetPassword.vue",
        "resources/js/Pages/Auth/VerifyEmail.vue",
        "resources/js/Pages/Dashboard.vue",
        "resources/js/Pages/Profile/Edit.vue",
        "resources/js/Pages/Profile/Partials/DeleteUserForm.vue",
        "resources/js/Pages/Profile/Partials/UpdatePasswordForm.vue",
        "resources/js/Pages/Profile/Partials/UpdateProfileInformationForm.vue",
        "resources/js/Pages/Home/Index.vue"
    ],
    "css": ["assets/app-7LbE6mUY.css"],
    "file": "assets/app-7-_4SnFd.js",
    "imports": ["_vendor-SQfNrWup.js"],
    "isEntry": true,
    "src": "resources/js/app.js"
}

app.blade.php

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap" rel="stylesheet">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@600&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
    <script
    src="https://code.jquery.com/jquery-3.7.1.js"
    integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
    crossorigin="anonymous"></script>
    @routes
    @vite(['resources/js/app.js', "resources/js/Pages/{$page['component']}.vue"])
    @inertiaHead
</head>
<body>
    @inertia

    <script>
        const locale = localStorage.getItem("locale");
            window.addEventListener("locale-changed", (event) => {
                locale = event.detail.storage;
            });
        document.body.dir = locale === 'en' ? 'ltr' : 'rtl';
        document.getElementsByTagName("body")[0].style.fontFamily =  locale === 'en' ? "Roboto" : "Noto Sans Arabic";

    </script>
</body>

Please or to participate in this conversation.