Heim > Fragen und Antworten > Hauptteil
Wenn ich die Register
-Seite in den Seitenordner lege, sieht das so aus:
/pages - Register.vue
Dann funktioniert alles einwandfrei und die Seite wird geladen, aber wenn ich die Register
页面放入 auth
Seite wie folgt in den Ordner auth
lege:
/pages /auth - Register.vue
Es funktioniert nicht, das ist der Fehler, den ich sehe, wenn ich die Konsole öffne:
dynamic-import-helper:7 Uncaught (in promise) Error: Unknown variable dynamic import: ./pages/auth/Register.vue at dynamic-import-helper:7:96 at new Promise (<anonymous>) at default (dynamic-import-helper:6:12) at resolve (app.js:5:22) at e2.h2 [as resolveComponent] (createInertiaApp.js:8:52) at n2.setPage (router.ts:378:33) at router.ts:323:19
Weiß jemand, warum das nicht funktioniert?
Das ist mein vite.config.js-Code:
import { defineConfig } from 'vite'; import laravel from 'laravel-vite-plugin'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [ vue(), laravel({ input: ['resources/css/app.css', 'resources/js/app.js'], refresh: true, }), ], });
Das ist mein app.js-Code:
import {createApp, h} from 'vue'; import {createInertiaApp} from "@inertiajs/inertia-vue3"; createInertiaApp({ resolve: name => import(`./pages/${name}.vue`), setup({el, app, props, plugin}) { createApp({render: () => h(app, props)}) .use(plugin) .mount(el) } });
Ich habe versucht, ${name}
auf „Nur Authentifizierung/Registrierung“ umzustellen, und dann hat es funktioniert? Aber das ist keine wirkliche Lösung.
Dies ist die Methode, die ich zum Rendern der Register
-Seite aufrufe:
public function register(): Response|ResponseFactory { return Inertia::render('auth/Register'); }
P粉0546168672023-12-27 10:06:26
我遇到了同样的问题,我按照 Inertia 的文档重写它来修复它。
我在 @inertiajs/react": "^1.0.2"
上,我的代码如下所示:
import { createRoot } from 'react-dom/client'; import { createInertiaApp } from '@inertiajs/react'; const createApp = () => createInertiaApp({ resolve: (name) => { const pages = import.meta.glob('./pages/**/*.tsx', { eager: true }); const page = pages[`./pages/${name}.tsx`]; return page; }, setup({ el, App, props }) { createRoot(el).render(<App {...props} />); }, }); export default createApp;
import.meta.glob
是 vite 构建的-in feature 它将预先构建在此 glob 模式中找到的所有组件并将它们存储在一个数组中。然后,您可以从该数组访问需要渲染的页面(模块),并在解析方法中返回它。
希望对您有帮助!