Vite 的 Laravel SSR Vue 配置，ssr.js 文件？

Question

如何让 SSR 与 Vite 一起用于我的 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项目而不是惯性。

Answer 1

这是一个镜头，我不确定您是否需要它，因为听起来它不需要它也可以工作。但是，这是 Vuejs 自己记录的一个示例，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
    }
  }
)

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