如何解决在 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 举报,一经查实,本站将立刻删除。