Laravel Vite 为生产构建（惯性）-未知动态导入

Question

我目前正在尝试创建 Laravel / Vite /Inertia 的生产版本，在完成构建（npm run build）时，我尝试使用该捆绑包，但出现以下错误：

Uncaught (in promise) Error: Unknown variable dynamic import: ./Pages/Auth/Login.vue

我的 vite.config.js 文件具有以下内容：

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue';
import path from 'path';

export default defineConfig({
    plugins: [
        laravel({
            input: [
                'resources/css/app.css',
                'resources/js/app.js',
            ],
            ssr: 'resources/js/ssr.js',
            refresh: true,
            
        }),

        vue(),
    ],
    css: {
        postCss: {
            plugins: {
                tailwindcss: {},
                autoprefixer: {},
            },
        },
    },
    resolve: {
        alias: {
            '@images': path.resolve('./resources/images'),
        },
    },
    build: {
        chunkSizeWarningLimit: 200,
        rollupOptions: {
            output:{
                manualChunks(id) {
                  if (id.includes('node_modules')) {
                      return id.toString().split('node_modules/')[1].split('/')[0].toString();
                  }
              }
            }
        }
    }
});

我的 App.js 有以下内容：

import AdminLayout from '@/Layouts/Admin.vue'
import Auth from '@/Layouts/Auth.vue'
import { createApp, h } from 'vue'
import { createInertiaApp, Link } from '@inertiajs/inertia-vue3'
import { createPinia } from "pinia";

createInertiaApp({
  resolve: async (name) => {
    const page = (await import(`./Pages/${name}.vue`)).default
    if (page.layout === undefined) {
            page.layout = AdminLayout
        }
        else if (page.layout == 'auth') {
            page.layout = Auth
        }
        return page
  },
  setup({ el, App, props, plugin }) {
    createApp({ render: () => h(App, props) })
      .use(plugin)
      .use(createPinia())
            .component("Link", Link)
      .mixin({ methods: { route } })
            .mount(el)
  },
})

vue 文件位于：

/resources/js/

我拥有的文件是：

提前致谢。

Answer 1

Jaydeep 在上面给出了 React 的正确答案，Laracasts 上的@dlebedef给出了 Vue 的正确答案。简而言之，用以下代码片段替换resolve属性和值为我解决了这个问题。resources/js/app.js格式将根据您的app.js设置方式而有所不同。

resolve: (name) => resolvePageComponent(`./Pages/${name}.vue`, import.meta.glob("./Pages/**/*.vue")),