1

app/Http/Controllers/Web/HomeController.php

@@ -10,11 +10,13 @@ class HomeController extends Controller
     public function show()
     {
         # 自定义页面头部
-        $title = '首页测试';
+        $title = 'Home';
         return Inertia::render('Home/index', [
             'info' => [
                 'title' => $title,
             ],
         ]);
+        // @vue/server-renderer
+        // vue-loader
     }
 }

bootstrap/ssr/app2.mjs

+import { defineComponent, ref, unref, useSSRContext, createApp, h } from "vue";
+import { ssrRenderComponent, ssrInterpolate, ssrRenderAttrs } from "vue/server-renderer";
+import { Head, createInertiaApp } from "@inertiajs/vue3";
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "index",
+  __ssrInlineRender: true,
+  props: { info: Object },
+  setup(__props) {
+    ref(false);
+    const num = ref(1);
+    return (_ctx, _push, _parent, _attrs) => {
+      _push(`<!--[-->`);
+      _push(ssrRenderComponent(unref(Head), {
+        title: __props.info.title
+      }, null, _parent));
+      _push(`<h1>${ssrInterpolate(__props.info.title)}</h1> ${ssrInterpolate(num.value)} <button>点击</button><p>Hello, welcome to your first Inertia app!</p><!--]-->`);
+    };
+  }
+});
+const _sfc_setup$1 = _sfc_main$1.setup;
+_sfc_main$1.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("resources/js/Pages/Home/index.vue");
+  return _sfc_setup$1 ? _sfc_setup$1(props, ctx) : void 0;
+};
+const __vite_glob_0_0 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: _sfc_main$1
+}, Symbol.toStringTag, { value: "Module" }));
+const _sfc_main = {
+  __name: "app",
+  __ssrInlineRender: true,
+  setup(__props) {
+    return (_ctx, _push, _parent, _attrs) => {
+      _push(`<p${ssrRenderAttrs(_attrs)}>Hello, welcome to your first Inertia app!</p>`);
+    };
+  }
+};
+const _sfc_setup = _sfc_main.setup;
+_sfc_main.setup = (props, ctx) => {
+  const ssrContext = useSSRContext();
+  (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("resources/js/Pages/app.vue");
+  return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
+};
+const __vite_glob_0_1 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
+  __proto__: null,
+  default: _sfc_main
+}, Symbol.toStringTag, { value: "Module" }));
+createInertiaApp({
+  id: "app",
+  resolve: (name) => {
+    const pages = /* @__PURE__ */ Object.assign({ "./Pages/Home/index.vue": __vite_glob_0_0, "./Pages/app.vue": __vite_glob_0_1 });
+    return pages[`./Pages/${name}.vue`];
+  },
+  setup({ el, App, props, plugin }) {
+    const app = createApp({ render: () => h(App, props) });
+    app.use(plugin);
+    app.mount(el);
+  }
+});

bootstrap/ssr/ssr.mjs

-import {unref, useSSRContext, createSSRApp, h} from "vue";
-import {ssrRenderComponent, ssrInterpolate} from "vue/server-renderer";
-import {Head, createInertiaApp} from "@inertiajs/vue3";
-import createServer from "@inertiajs/vue3/server";
-import {renderToString} from "@vue/server-renderer";
-
-const _sfc_main = {
-    __name: "index",
-    __ssrInlineRender: true,
-    props: {info: Object},
-    setup(__props) {
-        return (_ctx, _push, _parent, _attrs) => {
-            _push(`<!--[-->`);
-            _push(ssrRenderComponent(unref(Head), {
-                title: __props.info.title
-            }, null, _parent));
-            _push(`<h1>${ssrInterpolate(__props.info.title)}</h1><p>Hello, welcome to your first Inertia app!</p><!--]-->`);
-        };
-    }
-};
-const _sfc_setup = _sfc_main.setup;
-_sfc_main.setup = (props, ctx) => {
-    const ssrContext = useSSRContext();
-    (ssrContext.modules || (ssrContext.modules = /* @__PURE__ */ new Set())).add("resources/js/Pages/Home/index.vue");
-    return _sfc_setup ? _sfc_setup(props, ctx) : void 0;
-};
-const __vite_glob_0_0 = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
-    __proto__: null,
-    default: _sfc_main
-}, Symbol.toStringTag, {value: "Module"}));
-createServer(
-    (page) => createInertiaApp({
-        page,
-        render: renderToString,
-        resolve: (name) => {
-            const pages = /* @__PURE__ */ Object.assign({"./Pages/Home/index.vue": __vite_glob_0_0});
-            return pages[`./Pages/${name}.vue`];
-        },
-        setup({App, props, plugin}) {
-            return createSSRApp({
-                render: () => h(App, props)
-            }).use(plugin);
-        }
-    })
-);

package.json

@@ -2,21 +2,19 @@
     "private": true,
     "scripts": {
         "dev": "vite",
-        "build": "vite build && vite build --ssr"
+        "build": "vite build",
+        "build:ssr": "vite build && vite build --ssr"
     },
     "devDependencies": {
+        "@inertiajs/vue3": "^1.0.7",
         "@vitejs/plugin-vue": "^4.2.1",
+        "@vue/server-renderer": "^3.3.4",
         "axios": "^1.1.2",
         "laravel-vite-plugin": "^0.7.2",
         "lodash": "^4.17.19",
         "postcss": "^8.1.14",
         "typescript": "^5.0.4",
-        "vite": "^4.0.0"
-    },
-    "dependencies": {
-        "@inertiajs/vue3": "^1.0.6",
-        "@vue/server-renderer": "^3.2.47",
-        "vue": "^3.2.36",
-        "vue-loader": "^17.0.1"
+        "vite": "^4.0.0",
+        "vue": "^3.2.36"
     }
 }

resources/js/Pages/Home/index.vue

 <template>
     <Head :title="info.title"/>
     <h1>{{ info.title }}</h1>
+    {{ num }}
+    <button @click="onNumChange">点击</button>
     <p>Hello, welcome to your first Inertia app!</p>
 </template>
 
@@ -12,6 +14,11 @@ import {ref} from 'vue';
 defineProps({info: Object})
 
 const dialog_visible = ref<boolean>(false)
+const num = ref(1)
+
+const onNumChange = () => {
+    num.value += 1;
+}
 </script>
 
 

resources/js/app.js

 import {createApp, createSSRApp, h} from 'vue'
 import {createInertiaApp} from '@inertiajs/vue3'
+import '../css/app.css'
 
 createInertiaApp({
     id: 'app',

vite.config.js

@@ -6,9 +6,9 @@ export default defineConfig({
     plugins: [
         vue(),
         laravel({
-            input: ['resources/css/app.css', 'resources/js/app.js'],
+            input: ['resources/js/app.js'],
             // ssr: 'resources/js/ssr.js',
-            refresh: true,
+            refresh: true, // 保存时刷新
         }),
     ],
     server: {