fix(admin): 修复后台前端 Vue/Inertia 加载失败导致白屏

- 原 unpkg 的 @inertiajs/vue3 UMD 路径 404，Inertia undefined - 改用 import map + esm.sh ESM CDN（自动解析依赖树） - vue 用含模板编译器的完整版 dist/vue.esm-browser.prod.js - inertia 用 ?bundle&external=vue，保证与 import map 的 vue 单实例 - 解决 runtime-only vue 无法编译 template 字符串导致的白屏
2026-08-11 22:54:39 +00:00
parent d175777d75
commit e0b447ddb1
1 changed files with 12 additions and 5 deletions
@@ -5,16 +5,23 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ .title }} - 祈福小助手管理后台</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://unpkg.com/@inertiajs/vue3@1.0.0/dist/index.umd.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Vue + Inertia 通过 import map 从 esm.sh 加载（ESM，自动解析依赖树，国内可访问） -->
    <script type="importmap">
    {
        "imports": {
            "vue": "https://esm.sh/vue@3.4.21/dist/vue.esm-browser.prod.js",
            "@inertiajs/vue3": "https://esm.sh/@inertiajs/vue3@1.0.0?bundle&external=vue"
        }
    }
    </script>
 </head>
 <body class="bg-gray-100">
    <div id="app" data-page='{"component":"{{ .page }}","props":{},"url":"{{ .url }}","version":""}'></div>
-    <script>
+    <script type="module">
-        const { createApp, h } = Vue;
+        import { createApp, h } from 'vue';
-        const { createInertiaApp } = Inertia;
+        import { createInertiaApp } from '@inertiajs/vue3';
        createInertiaApp({
            resolve: name => {