带有 Laravel Mix 的 VUE 中的 JQuery 插件

Posted 2023-02-23

【中文标题】带有 Laravel Mix 的 VUE 中的 JQuery 插件

【英文标题】：JQuery Plugins in VUE with Laravel Mix

【发布时间】：2017-09-07 18:40:49

【问题描述】：

在我的webpack.mix.js 我有这样的东西：

// vue components
mix.js('resources/assets/js/app.js', 'public/js');

// scripts which I need
mix.scripts([
    'resources/assets/js/jquery-2.2.4.min.js',
    'resources/assets/js/bootstrap.min.js',
    'resources/assets/js/fastclick.js',
    'resources/assets/js/toastr.min.js',
    'resources/assets/js/select2.min.js',
    ...
], 'public/assets/js/scripts.js');

// styles which I need
mix.styles([
    "resources/assets/css/bootstrap-colorpicker.min.css",
    "resources/assets/css/bootstrap-select.min.css",
    "resources/assets/css/bootstrap.min.css",
    "resources/assets/css/select2.min.css",
    ...
], 'public/assets/css/styles.css');

例如，我可以在我的 vue 组件之外初始化一个 select2。

但是当我尝试使用这个插件（或我的 mix.scripts 块的任何脚本）时，我得到下一个错误：

$(...).select2 is not a function

好吧，我搜索了一下，我找到了一个“解决方案”，在我的 vue 组件的 export default 之前，我需要 select2 脚​​本：

 ...

import Vue from 'vue';

require('../select2.min.js');

export default

...

现在它可以在我的 vue 组件内部和外部工作：但是我“导入”了我的 select2 插件两次：

在我的public/assets/js/scripts.js 中（我需要它，因为我使用 select2 和其他没有 vue 组件的插件） 在我的resources/assets/js/app.js 内部（当我运行npm run watch 或npm run production 时，编译器会将我的vue 组件的要求添加到这个脚本文件中）

所以，我的问题是：如何让 VUE 中的组件使用来自我的 public/assets/js/scripts.js 文件的 JQuery 脚本，而不必在每个 vue 组件中都要求它们？ p>

我希望有办法做到这一点

【参考方案1】：

据我所知，Laravel mix 的默认 webpack.config.js 包括 JQuery。所以我评论了webpack.config.js的下一行（271）：

/*
new webpack.ProvidePlugin(Mix.autoload || 
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery'
),
*/

现在，当我显示 JQuery console.info($()); 的内容时，我看到了所有插件。

但我觉得这有点脏。

有没有官方的方法可以做到这一点？