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

Posted 2023-02-22

【中文标题】在 Laravel Mix 中使用 extract() 时 Vue 未加载

【英文标题】：Vue not loading when using extract() in Laravel Mix

【发布时间】：2020-01-26 06:10:58

【问题描述】：

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

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

【参考方案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

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

 那个清单文件是什么？

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

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

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