Laravel 9中Vue 3无法渲染页面内容的问题排查

我安装了Laravel 9及最新版Vue 3.2.45，首次使用这两个框架，发现Laravel 9采用Vite作为模块打包工具。尝试快速入门Demo时遇到问题：页面无内容显示，但代码能正常触发alert提示，页面输出的#app元素为空：

<div id="app" data-v-app=""><!----></div>

相关代码 #

vite.config.js #

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

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

app.js #

import './bootstrap';
import { createApp } from 'vue'

const app = createApp({
    data() {
        return {
            count: 0
        }
    },
    created() {
        alert('test')
    },
})

app.mount('#app')

test.blade.php #

@vite('resources/js/app.js')

<div id="app">
    <button @click="count++">@{{ count }}</button>
</div>

问题原因 #

Vite配置中缺少Vue插件，导致Vite无法识别并编译Vue的模板语法。虽然Vue实例能正常挂载（触发created钩子的alert），但无法解析挂载元素内的模板内容，最终渲染为空。

解决步骤 #

• 安装Vite Vue插件：

npm install @vitejs/plugin-vue --save-dev

• 修改vite.config.js，引入并添加Vue插件：

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/js/app.js'],
            refresh: true,
        }),
        vue(),
    ],
    resolve: {
        alias: {
            '@': '/resources/js',
        },
    },
});

• 重启Vite开发服务器（若之前运行了npm run dev，先终止再重新启动）

完成后，页面即可正常渲染按钮和计数功能。

内容的提问来源于stack exchange，提问作者Marko Nisevic