Laravel, Vue - "Вам может понадобиться соответствующий загрузчик" для тегов шаблонов

ProgramBox

Laravel, Vue — «Вам может понадобиться соответствующий загрузчик» для тегов шаблонов

Post author:admin
Запись опубликована:22 августа, 2022
Post category:Вопросы по программированию

#laravel #vue.js #webpack #vue-loader

#laravel #vue.js #webpack #vue-загрузчик

Вопрос:

В настоящее время я создаю веб-приложение с использованием Laravel и Vue. Ошибка, которую я получаю, касается всех компонентов, которые у меня есть.

 ERROR in ./resources/assets/js/components/App 1:0
Module parse failed: Unexpected token (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> <template>
|     <div id="layout-wrapper">
|         <app-topbar></app-topbar>
 @ ./resources/assets/js/app.js 6:0-35 41:11-14
 @ multi ./resources/assets/js/app.js ./resources/assets/sass/style.scss

файл App.vue выглядит следующим образом:

 <template>
    <div id="layout-wrapper">
        <app-topbar></app-topbar>
        <app-menu></app-menu>

        <div class="main-content">
            <div class="page-content">
                <router-view></router-view>
                <app-footer></app-footer>
            </div>
        </div>
    </div>
</template>

<script>
    import AppTopbar from './_partials/AppTopbar'
    import AppMenu from './_partials/AppMenu'
    import AppFooter from './_partials/AppFooter'
    import Users from './users/Users'
    import Dashboard from './dashboard/Dashboard'

    export default {
        components: {
            'app-topbar': AppTopbar,
            'app-menu': AppMenu,
            'app-footer': AppFooter,
            Users,
            Dashboard,
        },
        beforeMount() {
            axios.get('/metadata')
                .then(response => {
                    window.Laravel = {
                        response: response,
                        current_year: response.current_year,
                        csrf: response.csrf,
                        asset(path){
                            return this.response.asset '/' path;
                        },
                        trans(text){
                            return this.response.trans[text];
                        },
                        route(name){
                            return this.response.base_url '/' this.response.routes[name];
                        }
                    };
                });
        },
    }
</script>

Из ошибки я понимаю, что проблема в том, что теги <template></template> не анализируются. Из того, что я узнал, мне нужны зависимости vue-loader и vue-template-compiler для них. Я уже установил их, однако я все еще продолжаю получать эти ошибки.
Я также обнаружил, что попытка использовать более старую версию (текущую 15.x.x, более старую 14.x.x) vue-loader может помочь, но это не помогло.

Мои версии: laravel 8.12.3 npm 6.14.4 зависимости package.json:

 "devDependencies": {
        "axios": "^0.19",
        "cross-env": "^7.0",
        "laravel-mix": "^5.0.1",
        "lodash": "^4.17.19",
        "resolve-url-loader": "^3.1.0",
        "sass": "^1.29.0",
        "sass-loader": "^8.0.2",
        "vue-template-compiler": "^2.6.12"
    },
    "dependencies": {
        "vue": "^2.6.12",
        "vue-loader": "^14.2.4",
        "vue-router": "^3.4.9"
    }

Поскольку я не разбираюсь в Vue, я понимаю, что сделал что-то не так. Однако я не нашел решений в Интернете. Итак, я хотел бы попросить вашей помощи.

Обновление: поскольку в Laravel есть предварительно настроенный файл webpack.config, то, вероятно, это то, что, я думаю, я могу вам показать. webpack.mix.js :

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.sass('resources/assets/sass/style.scss', 'public/assets')
    .js('resources/assets/js/app.js', 'public/js')

    .styles([
        // Layout
        'resources/assets/template/system/css/bootstrap.min.css',
        'resources/assets/template/system/css/icons.min.css',
        'resources/assets/template/system/css/app.min.css',
        // Data Table
        'resources/assets/template/system/css/dataTables.bootstrap4.min.css',
        'resources/assets/template/system/css/responsive.bootstrap4.min.css',
        // Custom
        'public/assets/style.css'
    ], 'public/css/style.min.css')

    .scripts([
        // Layout
        'resources/assets/template/system/js/jquery.min.js',
        'resources/assets/template/system/js/bootstrap.bundle.min.js',
        'resources/assets/template/system/js/metisMenu.min.js',
        'resources/assets/template/system/js/simplebar.min.js',
        'resources/assets/template/system/js/waves.min.js',
        'resources/assets/template/system/js/jquery.sparkline.min.js',
        'resources/assets/template/system/js/morris.min.js',
        'resources/assets/template/system/js/raphael.min.js',
        'resources/assets/template/system/js/app.js',
        // Data Tables
        'resources/assets/template/system/js/jquery.dataTables.min.js',
        'resources/assets/template/system/js/dataTables.bootstrap4.min.js',
        'resources/assets/template/system/js/dataTables.responsive.min.js',
        'resources/assets/template/system/js/responsive.bootstrap4.min.js',
        // Vue
        //'resources/assets/template/system/js/vue.js',
        // Custom
        //'resources/assets/js/vue.js',
        'public/js/app.js',
        'resources/assets/js/script.js'
    ], 'public/js/script.min.js');

Ответ №1:

В Laravel 8 компиляция ресурсов работает немного по-другому. Он добавит компиляторы vue в качестве зависимости только в том случае, если вы объявите, что хотите скомпилировать файл vue в webpack.mix.js .

Посмотрите, что случилось со мной после этого: http://prntscr.com/whr7wv

Попробуйте изменить
.js('resources/assets/js/app.js', 'public/js')
Для
.js('resources/assets/js/app.js', 'public/js').vue()
и вернитесь к публикации в случае успеха.

Примечание: подумайте о том, чтобы не использовать laravel / ui и создавать вручную app.js

Ответ №2:

Приложение Laravel 8 версии Vue 2.6 затем, пожалуйста, измените код в

webpack.mix.js

 mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Для

 mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]).vue();

«вам может понадобиться соответствующий загрузчик для обработки этого типа файлов» причина ошибки приложения laravel и vue >> package.json — «laravel-mix»: «^ 6.0.6» — версия 6 или выше.

Ответ №3:

Это то, что сработало для меня (Laravel 8 Vue 2.6). Измените код в

webpack.mix.js

 mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

Для

 mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .vue();

затем запустите

npm обновляет vue-загрузчик

1. Не рекомендуется копировать уже принятые ответы, немного адаптировать их и выдавать за собственные. Если вам есть что добавить, вы можете прокомментировать этот ответ.

Ответ №4:

На самом деле вы не установили пользовательский интерфейс для файлов vue в laravel, поэтому он не распознает тег шаблона в файле vue. Итак, запустите несколько команд в новом терминале:

composer require laravel/ui
php artisan ui vue
npm install amp;amp; npm run dev

Метки: Laravel, Vue — «Вам может понадобиться соответствующий загрузчик» для тегов шаблонов