یلدا ادامه داره... ❤️ ۴۰ درصد تخفیف همه دورهها
استفاده از تخفیفهاسلام دوستان خسته نباشید
ما یک پروژه لاراول داریم که با 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",
],
},
});
سلام...وقت بخیر...
اقای حسین بنایی خیرآبادی مسئله شما برای 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 } })
},
}),
)
آیا مایل به ارسال نوتیفیکیشن و اخبار از طرف راکت هستید ؟