Laravel+Vite+Vue环境下Blade内容不渲染问题求助

问题描述 #

搭建Laravel+Vite+Vue开发环境后，执行npm run dev命令，页面仅能显示Vue组件，Blade模板中的<p>Sample text</p>无法渲染显示。

原代码文件 #

index.blade.php #

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Laravel 9 with vue 3 vite</title>

</head>

<body>
    <div id="app">
        <calendar-component></calendar-component>
        <p>Sample text</p>
    </div>
    @vite('resources/js/app.js')
</body>

</html>

原app.js #

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

import CalendarComponent from "./components/CalendarComponent.vue";

createApp(CalendarComponent).mount("#app");

问题根源 #

原app.js中直接将CalendarComponent作为根组件传入createApp()，挂载到#app容器时，Vue会完全替换掉#app容器内的所有原有DOM内容，导致Blade模板里的<p>Sample text</p>被覆盖，无法显示。

解决方法 #

要保留#app内的非Vue DOM元素，需将Vue组件注册到根实例中，而非用组件直接作为根应用。修正后的app.js写法如下：

修正后的app.js #

import "./bootstrap";
import { createApp } from "vue";
import CalendarComponent from "./components/CalendarComponent.vue";

const app = createApp({
    components: {
        CalendarComponent,
    },
});

app.mount("#app");

此写法下，Vue会在#app容器内编译渲染指定的Vue组件标签，同时保留容器内的其他非Vue DOM元素（如<p>Sample text</p>），不会替换整个容器内容。

内容的提问来源于stack exchange，提问作者Łukasz Jóźwiak