2 پاسخ

مشکل در راه اندازی 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 11 ماه پیش مطرح شد
mahdi
تخصص : برنامه نویس تازه وارد
@poyakimia 2 هفته پیش مطرح شد
0

سلام...وقت بخیر...

اقای حسین بنایی خیرآبادی مسئله شما برای ssr حل شد؟ چون دقیقا بنده هم به مسئله خوردم...البته همه چی درسته وقتی nmp run build میگیریم درسته و php artisan inertia:start-ssr رو هم میزنم درسته...
اما سایت بالا نمیاد چرا؟ این هم کدهای ssr.js

import { createInertiaApp, Head, Link } from '@inertiajs/vue3'
import createServer from '@inertiajs/vue3/server'
import { renderToString } from '@vue/server-renderer'
import { createSSRApp, h } from 'vue'
import Layout from './Layouts/Layout.vue'

createServer(page =>
createInertiaApp({
page,
render: renderToString,
resolve: async name => {
const pages = import.meta.glob('./Pages/*/.vue', { eager: false })
const page = await pages[./Pages/${name}.vue]()

    page.default.layout = page.default.layout || Layout
    return page
},
setup({ App, props, plugin }) {
  return createSSRApp({
    render: () => h(App, props),
  })
  .use(plugin)
  .component('Link', Link)
  .component('Head', Head)
  .mixin({ methods: { route } })
},

}),
)


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

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