Laravel Blade+Vite环境下Vue3组件无法正常渲染问题求助

该问题和Vite本身无关，核心是三个配置/机制差异导致的：

• Vue3默认引入的是运行时版本，不带DOM模板编译器：你之前用Vue2+Laravel Mix时，构建工具默认给Vue指向带编译器的构建版本，支持直接解析挂载容器内写在原生HTML里的自定义组件标签；但Vite下import {createApp} from 'vue'默认引入的是体积更小的runtime-only版本，无法编译直接写在Blade/HTML里的模板内容，只能处理.vue文件内的模板或者手写render函数的场景。
• @vite指令位置错误：你把引入JS的@vite('app.js')写在了#app挂载容器内部，Vite生成的ES模块脚本默认延迟执行，挂载时会把容器内的脚本标签本身也当成模板内容解析，导致DOM结构解析异常。
• DOM模板的大小写限制：HTML原生标签不区分大小写，你写的大写开头<Test>会被浏览器自动转成全小写<test>，和全局注册的驼峰组件名匹配失败。

按顺序调整以下配置即可恢复和之前一致的使用方式：

1. 修正vite.config.js配置
   首先给Vue配置别名指向带编译器的构建版本，同时修正你之前配错的@路径别名（Laravel默认前端代码根目录是resources/js不是根目录下的src文件夹）：

   import laravel from 'laravel-vite-plugin';
   import { fileURLToPath } from 'url';
   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
   
   export default defineConfig({
       server: {
           host: 'linkbeen.test'
         },
         resolve: {
           alias: {
             // 修正@别名指向
             '@': fileURLToPath(new URL('./resources/js', import.meta.url)),
             // 关键：指定使用带运行时编译器的Vue版本，支持解析DOM内模板
             'vue': 'vue/dist/vue.esm-bundler.js'
           },
         },
         plugins: [
           vue(),
           laravel([
               'resources/sass/app.scss',
               'resources/js/app.js',
           ])
       ]
   });
   

   注意：改完vite配置必须重启Vite开发服务才会生效

2. 调整Blade模板结构
   把@vite指令移出#app挂载容器，建议放到<head>标签内，同时组件标签使用全小写写法：

   <!DOCTYPE html>
   <html>
   <head>
       @vite(['resources/js/app.js', 'resources/sass/app.scss'])
   </head>
   <body>
       <div id="app">
           <!-- DOM模板内使用全小写标签名 -->
           <test></test>
       </div>
   </body>
   </html>
   

3. 调整全局组件注册名
   在app.js里注册组件时使用短横线全小写命名，和DOM内的标签名匹配：

   import {createApp} from 'vue';
   import Test from './components/Test.vue';
   
   const app = createApp({
      mounted() {
         console.log('The app is working')
      }
   });
   // 用全小写短横线名注册全局组件
   app.component('test', Test);
   app.mount('#app');
   

调整完成后刷新页面即可正常渲染Test组件，不需要修改挂载逻辑，和你之前Vue2+Mix下的使用体验完全一致。

内容的提问来源于stack exchange，提问作者Mohammad H.