Не выводится тестовый компонент Vue

@schel4ok · Регистрация: 19.03.2016

Author24 — интернет-сервис помощи студентам

Я пытаюсь начать использовать Vue в проекте Laravel, но что-то идёт не так.

app.blade.php

HTML5

<!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 Vue</title>
 
        <link href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap" rel="stylesheet">
        <link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">
    </head>
    <body class="antialiased">
        <div class="container mx-auto">
            <div id="app">
 
                <testcomponent></testcomponent>
 
            </div>
        </div>
        <script src="{{ mix('js/app.js') }}"></script>
    </body>
</html>

app.js

Javascript

require('./bootstrap');
require('alpinejs');
require('./includes/script.js'); // тут подключаются скрипты jquery 
 
 
import Vue from "vue";
 
Vue.component('testcomponent', require('./components/testcomponent.vue').default);
 
const app = new Vue({
    el: '#app',
    created() {
        console.log('Vue ROOT instance mounted.')
    }
});

testcomponent.vue

HTML5

<template>
    <div>I'm an example component.</div>
</template>
 
<script>
    export default {
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

Код

Laravel Mix v6.0.34

✔ Compiled Successfully in 102ms
┌───────────────────────────────────────────────────────────────────┬──────────┐
│                                                              File │ Size     │
├───────────────────────────────────────────────────────────────────┼──────────┤
│                                                        /js/app.js │ 1.37 MiB │
│                                                       css/app.css │ 8.15 MiB │
│       …/lightgallery/dist/lg.svg?adb7aeef16adb8599e2d261b9a3a9f1e │ 9.64 KiB │
│       …/lightgallery/dist/lg.ttf?a53dcc5ea47fe7d1d9fc881ff489f409 │ 4.33 KiB │
│       …lightgallery/dist/lg.woff?0add59587d07387b771f49d3f91a92af │ 4.4 KiB  │
│       …tgallery/dist/loading.gif?fcba57cdb89652f9bb54271cc5a9cc0e │ 4.08 KiB │
│       …llery/dist/video-play.png?539c47b61bf24fb7ea0ca1953952a0e4 │ 4.42 KiB │
│       …llery/dist/vimeo-play.png?6b92efbd0d64acd8b405e4fc4342305d │ 5.3 KiB  │
│       …ery/dist/youtube-play.png?50359884d4f563065161d9c7ea0ad585 │ 5.06 KiB │
└───────────────────────────────────────────────────────────────────┴──────────┘
WARNING in DefinePlugin
Conflicting values for 'process.env.NODE_ENV'
webpack compiled with 1 warning

package.json

JSON

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "@tailwindcss/forms": "^0.2.1",
        "@tkh/tailwind-plugin-flex-basis": "^1.4.0",
        "alpinejs": "^2.8.0",
        "autoprefixer": "^10.2.4",
        "axios": "^0.21",
        "cross-env": "^7.0",
        "jquery": "^3.5.1",
        "laravel-mix": "^6.0.11",
        "lodash": "^4.17.20",
        "postcss": "^8.2.6",
        "postcss-each-variables": "^0.3.0",
        "postcss-extend": "^1.0.5",
        "postcss-import": "^8.2.0",
        "postcss-mixins": "^7.0.3",
        "postcss-simple-extend": "^1.0.0",
        "postcss-simple-vars": "^6.0.3",
        "postcss-svg": "^3.0.0",
        "resolve-url-loader": "^3.1.0",
        "tailwindcss": "2.0.3",
        "vue-template-compiler": "^2.6.12",
        "webpack": "^5.23.0"
    },
    "dependencies": {
        "@stripe/stripe-js": "^1.11.0",
        "lg-autoplay": "^1.2.1",
        "lg-fullscreen": "^1.2.1",
        "lg-hash": "^1.0.4",
        "lg-pager": "^1.0.2",
        "lg-share": "^1.2.1",
        "lg-thumbnail": "^1.2.1",
        "lg-video": "^1.4.0",
        "lg-zoom": "^1.3.0",
        "lightgallery": "^1.10.0",
        "npm": "^8.1.0",
        "vue": "^2.6.14",
        "vue-loader": "^15.9.8",
        "vue-router": "^3.4.9",
        "vuex": "^3.6.0"
    }
 
}

Но при этом текст I'm an example component. не выводится на страницу и я вижу ошибку в консоли, что я неправильно зарегистрировал компонент. Год назад я делал точно также и проблем не было.

	16.10.2021, 12:14