Vue 组件未显示在我的 Laravel 刀片页面中答案

【问题标题】：Vue component not showing up in my Laravel blade pageVue 组件未显示在我的 Laravel 刀片页面中
【发布时间】：2021-09-20 11:12:46
【问题描述】：

App.js 文件：

require('./bootstrap');

window.Vue = require('vue').default;

Vue.component('example-component', require('./components/ExampleComponent.vue'));

const app = new Vue({
    el: '#app',
});

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">
    <meta name="csrf-token" value="{{ csrf_token() }}" />
    <link rel="stylesheet" href="{{ mix('css/app.css') }}" />
    <script defer src="{{ mix('js/app.js') }}"></script>
    <title>Chat Deneme</title>
</head>

<body>

    <div id="app">
        <example-component></example-component>
    </div>

</body>

ExampleComponent.vue：

<template>
    <div>Hello, Example Component!</div>
</template>

<script>
export default {
   name:'example-component',
    mounted() {
        console.log('Example component mounted.')
    }
};
</script>

我使用 npm install --save-dev vue vue-template-compiler 来下载 vue。

webpack.mix：

const mix = require('laravel-mix');



mix.js('resources/js/app.js', 'public/js')
    .vue()
    .postCss('resources/css/app.css', 'public/css', [
        require('postcss-import'),
        require('tailwindcss'),
    ]);

if (mix.inProduction()) {
    mix.version();
}

我同时做了 npm run watch、npm run dev、npm run hot 但没有错误。我的页面和控制台是空白的。

【问题讨论】：

我把改成了在我的 Blade.php 文件中，但现在我在控制台中收到此错误：找不到元素：#app

标签： laravel vue.js

【解决方案1】：

我通过在我的 Blade.php 文件中添加延迟到脚本标记解决了这个问题，并且我在 app.js 中包含组件时添加了默认值。这是最终的 app.js

require('./bootstrap');

// Require Vue
window.Vue = require('vue').default;

// Register Vue Components
Vue.component('example-component', require('./components/ExampleComponent.vue').default);

// Initialize Vue
const app = new Vue({
    el: '#app',
});

【讨论】：