在 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');

资源/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()后一切都会恢复正常。我究竟做错了什么？

Answer 1

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

\n

\n
• 应用程序代码：app.js
\n
• 供应商库：vendor.js
\n
• 清单（webpack 运行时）：manifest.js
\n

\n

因此，您还必须在 Blade 视图中包含其他脚本，以便 Vue 加载

\n

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

\n

这个顺序有点重要，因为 Vue 实例是在app.js\xc2\xa0 中创建并挂载的，而库本身在其中vendor.js，而manifest.js\xc2\xa0 是 webpack 运行时

\n

来自文档

\n

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

\n

\xc2\xa0那个清单文件是什么？

\n

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

\n

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

\n

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

\n