在 Laravel Mix 中使用 extract() 时 Vue 未加载

Question

我的 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');

resources/js/app.js:

require('./bootstrap');

window.Vue = require('vue');

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

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

但是如果我在 webpack.mix.js 中添加 .extract() 到最后，一切都会成功编译，但 Vue 根本不会在浏览器中加载。删除 .extract() ，一切都会恢复正常。我做错了什么？

Answer 1

mix.extract()（不带参数）将通常的 app.js 分成三个文件

申请代码：app.js
供应商库：vendor.js
清单（webpack 运行时）：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 是 webpack 运行时间

来自docs

如果您不向提取方法提供一组 npm 库，Mix 将从 node_modules 目录中提取所有导入的库。这是一个有用的默认值，很可能是您想要的。但是，如果您需要明确，则传递一个数组，并且只会提取那些供应商库。

清单文件是什么？

Webpack 使用少量运行时间代码进行编译，以协助其工作。

当不使用 mix.extract() 时，此代码对您不可见，位于您的捆绑文件中。

但是，如果我们想要拆分我们的代码并允许长期缓存，那么运行时间代码需要存在于某个地方。因此，mix 也会将其提取到自己的文件中。这样，您的供应商文件和清单文件都可以尽可能长时间地缓存。

在 Laravel Mix 中使用 extract() 时 Vue 未加载

Vue not loading when using extract() in Laravel Mix

webpack

vue.js

laravel-mix

清单文件是什么？