مشکل در راه اندازی SSR در پروژه Laravel Inertia Vue Vite - پکیج ziggy

سلام دوستان خسته نباشید
ما یک پروژه لاراول داریم که با inertia اون رو spa تبدیل کردیم با فریم ورک vue و با استفاده از vite، بعد از اینکه بیشتر مراحل توسعه رو پیش بردیم رفتیم سراغ اینکه ssr رو راه اندازی کنیم و به کلی مشکل برخوردیم که تونستیم بیشترشون رو حل کنیم اما هر کاری کردیم این مشکل ما حل نشد
ما با پکیج ziggy به مشکل خوردیم که برای استفاده از route های لاراول توی جاوااسکریپت استفاده میشه، وقتی که پروژه بیلد میکنیم با این ارور مواجه می‌شیم:

TypeError: _ctx.$route is not a function
    at file:///I:/Work/Code/Web/Khyaboon/bootstrap/ssr/ssr.js:47628:20
    at renderComponentSubTree (I:\Work\Code\Web\Khyaboon\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:683:9)
    at renderComponentVNode (I:\Work\Code\Web\Khyaboon\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:631:12)
    at ssrRenderComponent (I:\Work\Code\Web\Khyaboon\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:86:10)
    at file:///I:/Work/Code/Web/Khyaboon/bootstrap/ssr/ssr.js:48349:13
    at renderComponentSubTree (I:\Work\Code\Web\Khyaboon\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:683:9)
    at renderComponentVNode (I:\Work\Code\Web\Khyaboon\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:631:12)
    at renderVNode (I:\Work\Code\Web\Khyaboon\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:743:14)
    at renderComponentSubTree (I:\Work\Code\Web\Khyaboon\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:698:7)
    at renderComponentVNode (I:\Work\Code\Web\Khyaboon\node_modules\@vue\server-renderer\dist\server-renderer.cjs.js:631:12)

محتوای فایل app.js:

import "./bootstrap";
import "../css/app.css";

import { createApp, h } from "vue";
import Toast from "vue-toastification";
import { createInertiaApp } from "@inertiajs/vue3";
import mitt from "mitt";
import Layout from "./Components/Layout.vue";
import VitrineLayout from "./Components/Vitrine/Layout.vue";
import "vue-toastification/dist/index.css";
import OpenLayersMap from "vue3-openlayers";
import "vue3-openlayers/styles.css";
import DatePickerClient from "./Plugins/DatePicker.client";

import route from "ziggy";
import { ZiggyVue } from "./ziggy";

createInertiaApp({
    resolve: (name) => {
        const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
        let page = pages[`./Pages/${name}.vue`];
        page.default.layout = name.startsWith("Panel/") ? Layout : VitrineLayout;
        return page;
    },
    setup({ el, App, props, plugin }) {
        const emitter = mitt();
        const VueApp = createApp({ render: () => h(App, props) });
        VueApp.use(Toast, {});
        VueApp.use(OpenLayersMap);
        VueApp.use(DatePickerClient);

        // VueApp.config.globalProperties.$route = route;

        VueApp.provide("emitter", emitter);
        VueApp.use(plugin);
        VueApp.mixin({ methods: { route } });
        VueApp.mount(el);
    },
});

محتوای فایل ssr.js:

import "../css/app.css";

import { renderToString } from "@vue/server-renderer";
import { createSSRApp, h } from "vue";
import { createInertiaApp } from "@inertiajs/vue3";
import mitt from "mitt";
import Layout from "./Components/Layout.vue";
import VitrineLayout from "./Components/Vitrine/Layout.vue";
import createServer from "@inertiajs/vue3/server";

import route from "ziggy";
import { ZiggyVue } from "./ziggy";

createServer((page) =>
    createInertiaApp({
        page,
        render: renderToString,
        resolve: (name) => {
            const pages = import.meta.glob("./Pages/**/*.vue", { eager: true });
            let currentPage = pages[`./Pages/${name}.vue`];
            currentPage.default.layout = name.startsWith("Panel/") ? Layout : VitrineLayout;
            return currentPage;
        },
        setup({ App, props, plugin }) {
            const emitter = mitt();
            const VueSSRApp = createSSRApp({
                render: () => h(App, props),
            });

            // VueSSRApp.config.globalProperties.$route = route;

            VueSSRApp.provide("emitter", emitter);
            VueSSRApp.use(plugin)
            VueSSRApp.mixin({methods: {route}});

            return VueSSRApp;
        },
    })
);

محتوای فایل vite.config.js:

import path from "path";
import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            ssr: "resources/js/ssr.js",
            refresh: true,
        }),
        vue({
            template: {
                compilerOptions: {
                    isCustomElement: (tag) => {
                        ["DatePicker"].includes(tag);
                    },
                },
            },
        }),
    ],
    resolve: {
        mainFields: ["browser", "module", "main", "jsnext:main", "jsnext"],
        alias: {
            "@/": "/resources/js",
            ziggy: path.resolve("vendor/tightenco/ziggy/dist/vue.es"),
        },
    },
    ssr: {
        noExternal: [
            "@splidejs/vue-splide",
            "@photo-sphere-viewer/core",
            "date-fns",
            "vue-toastification",
            "lightgallery",
            // "vue3-persian-datetime-picker",
            // "@vueup/vue-quill",
            // "quill",
            // "vue-simple-range-slider",
            // "vue-star-rating",
            // "vue3-openlayers",
        ],
    },
});

@hesammousavi


ثبت پرسش جدید
رایموند
تخصص : مختصص وردپرس - برنامه نویس لار...
@Raymond 5 ماه پیش مطرح شد

برای ارسال پاسخ لازم است وارد شده یا ثبت‌نام کنید

ورود یا ثبت‌نام