在 Laravel 8 中提取 Vue 打破了 Bootstrap 5.0.0-beta2 菜单和下拉菜单

问题描述

我有一个带有 Bootstrap 和几个 Vue 组件的 Laravel 项目。由于文件大小的增加，我将我的 Vue 组件从 app.js 提取到一个单独的 components.js 文件中。使用我当前的设置，我的 app.js 文件似乎不包含所需的引导程序 js 文件，因为在没有 components.js 引导程序组件（如菜单切换、下拉菜单等）的页面上无法正常工作。

这是我提取 Vue 组件的 webpack.mix.js 文件：

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

mix.js('resources/js/app.js','public/js')
    .extract(['vue'],'public/js/components.js').vue()
    .sass('resources/sass/app.scss','public/css')
    .sourceMaps(false,'source-map');

这允许我使用 components.js 指令仅在我的 Vue 组件需要出现的页面上包含我的 Vue 组件文件 (@stack)：

// e.g. in 'components/searchbar.blade.PHP'
//
@push('vue')
    <script src="{{ mix('js/components.js') }}" defer></script>
@endpush

在我的 master.blade.PHP 模板文件中使用 manifest.js 和我的 app.js 调用我的 Vue 堆栈。

// master.blade.PHP
//
<script src="{{ mix('js/manifest.js') }}" defer></script>
@stack('vue')
<script src="{{ mix('js/app.js') }}" defer></script>

我的 package.json：

"devDependencies": {
    "axios": "^0.19","bootstrap": "^5.0.0-beta2","cross-env": "^7.0","jquery": "^3.2","laravel-mix": "^6.0.13","lodash": "^4.17.19","postcss": "^8.2.7","resolve-url-loader": "^3.1.0","sass": "^1.15.2","sass-loader": "^8.0.0","svg-spritemap-webpack-plugin": "^3.9.0","vue-loader": "^15.9.6","vue-template-compiler": "^2.6.12"
},"dependencies": {
    "@popperjs/core": "^2.9.1","vue": "^2.6.12","vue-axios": "^3.2.2","vue-i18n": "^8.24.0","vue-translations": "^1.0.0"
}

我的 boostrap.js

window._ = require('lodash');
try {
    window.$ = window.jQuery = require('jquery');
    window.Popper = require('@popperjs/core').default;

    require('bootstrap');
} catch (e) {}

我是否以正确的方式使用 extract() 函数？或者是否有另一种解决方案可以从我的通用/全局 Bootstrap 功能中提取 Vue 组件（也就是页面特定组件）？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

laravel laravel vue.js webpack-mix