Laravel SSR Vue配置为Vite,ssr.js文件?

rsl1atfo  于 2023-04-07  发布在  其他
关注(0)|答案(1)|浏览(167)

我如何让SSR为我的Laravel项目工作?

export default defineConfig({
    plugins: [
        laravel({
            input: ["resources/css/app.css", "resources/js/app.js"],
            ssr: "resources/js/ssr.js",
            refresh: true,
        }),

但是ssr.js文件的内容应该是什么呢?
以下是我的js文件的内容:

import { createApp, markRaw } from "vue";
import router from "./router";
// Route is file with the Routes:
// import {
//   createRouter,
//   createWebHashHistory,
// } from "vue-router";

import { createPinia } from "pinia";

import App from "./screens/App.vue";

import ResizeTextarea from "resize-textarea-vue3";
import { useAuthStore } from "@/store/auth";

const pinia = createPinia();

pinia.use(({ store }) => {
    store.$router = markRaw(router);
});

const app = createApp(App);
app.use(pinia);
app.use(router);
app.use(ResizeTextarea);

app.mount("#app");

import Pusher from "pusher-js";
window.Pusher = Pusher;

在文档中找不到任何地方可以修复它。
这是一个VUE3项目,而不是惯性。

xzlaal3s

xzlaal3s1#

这里有一个镜头,我不确定你是否需要它,因为它听起来像是没有它也能工作https://vuejs.org/guide/scaling-up/ssr.html#custom-directives

// app.js (shared between server and client)
import { createSSRApp } from 'vue'
import { createStore } from './store.js'

// called on each request
export function createApp() {
  const app = createSSRApp(/* ... */)
  // create new instance of store per request
  const store = createStore(/* ... */)
  // provide store at the app level
  app.provide('store', store)
  // also expose store for hydration purposes
  return { app, store }
}

您还可以查看pina的(vue创建的商店)https://pinia.vuejs.org/ssr/,它可能与您的示例更相关

import devalue from '@nuxt/devalue'

export default viteSSR(
  App,
  {
    routes,
    transformState(state) {
      return import.meta.env.SSR ? devalue(state) : state
    },
  },
  ({ initialState }) => {
    // ...
    if (import.meta.env.SSR) {
      // this will be stringified and set to window.__INITIAL_STATE__
      initialState.pinia = pinia.state.value
    } else {
      // on the client side, we restore the state
      pinia.state.value = initialState.pinia
    }
  }
)

我相信这两个都是有效的,但我不知道你的用例。

相关问题