Laravel/Vite/Inertiajs 似乎無法從子目錄（在我的頁面資料夾中）匯入頁面

Question

當我將 Register 頁面放入頁面資料夾中時，如下所示：

/pages
   - Register.vue

然後一切正常並且頁面加載，但是當我將 Register 頁面放入 auth 資料夾中時，如下所示：

/pages
   /auth
      - Register.vue

它不起作用，這是我打開控制台時看到的錯誤：

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

有人知道為什麼這不起作用嗎？

這是我的 vite.config.js 程式碼：

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,
        }),
    ],
});

這是我的 app.js 程式碼：

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)
    }
});

我嘗試將 ${name} 更改為僅身份驗證/註冊，然後它就可以工作了？但這並不是真正的解決方案。

這是我呼叫的方法來呈現 Register 頁面：

public function register(): Response|ResponseFactory
{
    return Inertia::render('auth/Register');
}

Answer 1

我遇到了同樣的問題，我按照 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 模式中找到的所有元件並將它們儲存在一個陣列中。然後，您可以從該陣列存取需要渲染的頁面（模組），並在解析方法中傳回它。

希望對您有幫助！