laravel11使用vue3作为组件创建非单页面应用:

// laravel11默认使用vite打包，相关配置在vite.config.js下
  
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
  
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/css/welcome.css' , 'resources/js/app.js'], // 除了app.css 也可以配置多个css入口文件(比如这里的welcome.css)，以前都是习惯在一个app.css,其实可以多个相当于对css分组打包了
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    // Vue 插件会重写 Single File Components 中引用的资产 URL，
                    // 指向 Laravel web 服务器。设置此值为 `null` 允许 Laravel 插件
                    // 重新指向 Vite 服务器。
                    base: null,

                    // Vue 插件会解析绝对 URL 并将它们视为磁盘上文件的绝对路径。
                    // 设置此值为 `false` 将不处理绝对 URL，所以它们可以如预期
                    // 那样引用公共目录中的资产。
                    includeAbsolute: false
                }
            }
        }),

    ],
});
  
默认是没有 vue 相关的配置的，但是可以通过 @vitejs/plugin-vue 插件添加，但是发现 vue 组件不生效, 下面是我的 app.js
import './bootstrap';
  
// 非单页面应用
import { createApp } from 'vue';
  
import ExampleComponent from './components/ExampleComponent.vue'
  
const app = createApp({})
app.component('example-component', ExampleComponent)
  
app.mount('#app')
  
console.log('Vue app mounted')
  
没有任何问题，最后发现控制台有个警告:
Component provided template option but runtime compilation is not supported in this build of Vue. Configure your bundler to alias "vue" to "vue/dist/vue.esm-bundler.js".
  
开始没有注意，以为只是一个警告，但是后台添加到 vite.config.js下，问题解决了:
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
  
export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/css/welcome.css' , 'resources/js/app.js'], // 除了app.css 也可以配置多个css入口文件(比如这里的welcome.css)，以前都是习惯在一个app.css,其实可以多个相当于对css分组打包了
            refresh: true,
        }),
        vue({
            template: {
                transformAssetUrls: {
                    // Vue 插件会重写 Single File Components 中引用的资产 URL，
                    // 指向 Laravel web 服务器。设置此值为 `null` 允许 Laravel 插件
                    // 重新指向 Vite 服务器。
                    base: null,

                    // Vue 插件会解析绝对 URL 并将它们视为磁盘上文件的绝对路径。
                    // 设置此值为 `false` 将不处理绝对 URL，所以它们可以如预期
                    // 那样引用公共目录中的资产。
                    includeAbsolute: false
                }
            }
        }),

    ],
    resolve: {
        alias: {
            'vue': 'vue/dist/vue.esm-bundler.js',
        },
    },
});
  
这行配置确保 Vite 使用了包含模板编译器的 Vue 版本，这对于在运行时编译模板是必要的.