Блог

Главная - Вопросы по программированию - Объединение Laravel Vue.js Я получил сообщение об ошибке: «Модуль не найден: Ошибка: не удается разрешить ‘./vue/app'»

Объединение Laravel Vue.js Я получил сообщение об ошибке: «Модуль не найден: Ошибка: не удается разрешить ‘./vue/app'»

#laravel #vuejs2

#ларавель #vuejs2

Вопрос:

Я сделал все точно так же, как в этом видео https://www.youtube.com/watch?v=UHSipe7pSac но я получил эту ошибку, которую я cmd 🙁 «ОШИБКА в . /resources/js/app.js 4:0-28 Модуль не найден: Ошибка: не удается разрешить ‘./vue/ app’ в ‘D:ospdomainslaravel-todolistresourcesjs «веб-пакет скомпилирован с ошибкой 1» и ошибка в консоли браузера «Не обнаружена Ошибка: не удается найти модуль ‘./vue/app'».

Вот мое короткое обзорное видео с моим кодом https://www.youtube.com/watch?v=zZqYJaIgau4

Я создал папку /vue/ в /resources/js/ folder и поместил сюда файл ‘app.vue’ с кодом

 <template><div>Hello</div></template> <script>export default {}</script>

Затем в /resources/js/app.js файл Я импортирую экземпляр Vue и мой файл шаблона.

 require('./bootstrap');
import Vue from 'vue';
import App from './vue/app';

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

Пожалуйста, помогите понять, в чем проблема: (

Ответ №1:

Вероятно, вы используете Vue3 с Laravel Mix 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').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

Комментарии:

1. Спасибо. Это работает. Но это не 3, просто старый добрый vue 2 🙂

Ответ №2:

У меня была аналогичная проблема из того же руководства, и я попробовал решение здесь, но моя ошибка все еще не была устранена.

это то, что я сделал. Я использовал — 1.

 mix.js('resources/js/app.js', 'public/js').vue()
.postCss('resources/css/app.css', 'public/css', [
    //
]);
    1. Я снова устанавливаю npm с npm install помощью, потому что мне сказали, что некоторые пакеты не были установлены.
    1. Я снова устанавливаю vue с помощью npm install vue ,
    1. Я сделал npm run dev и, наконец npm run watch .

Ответ №3:

  1. Удалите node_modules папку в папке вашего проекта.
  2. Удалите папки npm и npm-cache в C:UsersAppDataRoaming и C:UsersAppDataLocal paths.
  3. Переустановите модули узла заново, используя npm install
  4. Установите Vue пакет npm install vue . В webpack.mix.js файле замените это (поскольку это mix версии 6.0) 
       mix.js('resources/js/app.js', 'public/js')
 .postCss('resources/css/app.css', 'public/css', [
  //
  ]);

с

       <code>mix.js('resources/js/app.js', 'public/js').vue()
     .postCss('resources/css/app.css', 'public/css', [
     //
     ]);
  1. Выполнить npm run hot. Ошибка должна исчезнуть.

Ответ №4:

  1. Заменить 
     mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

    Автор:

     mix.js('resources/js/app.js', 'public/js').vue()
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);
  2. Выполните следующие действия в командной строке 
      npm i vue-loader

Ответ №5:

В моем 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').vue()
.postCss('resources/css/app.css', 'public/css', [
    //
]);

Но я все еще получал ошибки при запуске npm run dev или npm run watch
после нескольких часов поиска оказалось, что я использую vue-loader 17 с Vue 2. Если вы хотите использовать Vue 2, последняя поддерживаемая версия vue-loader — 15, vue-loader 16 и выше предназначен исключительно для Vue 3. Я понизил рейтинг до vue-loader 15.9.8, и все работает зеленым цветом.

Метки: