Vue не загружается при использовании extract () в Laravel Mix - PullRequest
Новая
       8

Vue не загружается при использовании extract () в Laravel Mix

0 голосов
/ 26 сентября 2019

В моем проекте Laravel у меня есть почти полная настройка webpack.mix.js и resources / js / app.js.

webpack.mix.js: 

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

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

ресурсов/js/app.js:

require('./bootstrap');

window.Vue = require('vue');

Vue.component('profile', require('./components/profile/Profile.vue').default);

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

Но если я добавлю .extract() до конца в мой webpack.mix.js, все успешно скомпилируется, но Vue вообще не загружается в браузере.Удалите .extract() и все снова работает.Что я делаю не так?

1 Ответ

1 голос
/ 26 сентября 2019

mix.extract() (без аргументов) разбивает обычный app.js на три файла

  • Код приложения: app.js
  • Библиотеки поставщиков: vendor.js
  • Манифест (время выполнения веб-пакета): manifest.js

Таким образом, вам придется включить другие скрипты в представление Blade, чтобы Vue загрузила 

<!-- Scripts -->
<script src="{{ mix('js/manifest.js') }}" defer></script>
<script src="{{ mix('js/vendor.js') }}" defer></script>
<script src="{{ mix('js/app.js') }}" defer></script>

порядок важен, потому что экземпляр Vue создается и монтируется в app.js, а сама библиотека в vendor.js, а manifest.js - это среда выполнения веб-пакета

из документов

Если вы не предоставите массив библиотек npm для метода extract, Mix извлечет все импортированные библиотеки из каталога node_modules.Это полезное значение по умолчанию и, вероятно, то, что вы хотите.Однако, если вам нужно быть явным, передайте массив, и будут извлечены только те библиотеки поставщиков.

Что это за файл манифеста?

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

Когда вы не используете mix.extract(), этот код невидим для вас и находится внутри вашего файла комплекта.

Однако, если мы хотим разделить наш код и разрешитьдолгосрочное кэширование, этот код времени выполнения должен где-то жить.Таким образом, mix извлечет его в свой собственный файл.Таким образом, файлы вашего поставщика и манифеста могут храниться в кэше как можно дольше.

...