vue 引入 静态jquery插件有问题

发布于 2022-09-11 22:26:41 字数 3104 浏览 30 评论 0

有个需求,需要把一个由jquery和bootstrap组成的静态页引入到vue页面中,现在把jquery和bootstrap已经引入进入了

相关插件有这些

    <!-- jquery latest version -->
    <script src="../js/vendor/jquery-1.12.4.min.js"></script>
    <!-- bootstrap js -->
    <script src="../js/bootstrap.min.js"></script>
    <!-- owl.carousel js -->
    <script src="../js/owl.carousel.min.js"></script>
    <!-- Counter js -->
    <script src="../js/jquery.counterup.min.js"></script>
    <!-- waypoint js -->
    <script src="../js/waypoints.js"></script>
    <!-- magnific js -->
    <script src="../js/magnific.min.js"></script>
    <!-- wow js -->
    <script src="../js/wow.min.js"></script>
    <!-- meanmenu js -->
    <script src="../js/jquery.meanmenu.js"></script>
    <!-- Form validator js -->
    <script src="../js/form-validator.min.js"></script>
    <!-- plugins js -->
    <script src="../js/plugins.js"></script>
    <!-- main js -->
    <script src="../js/main.js"></script>

这些都是静态的js文件

我引入jquery的方式

因为直接使用npm安装的jquery包,会提示我jquery版本过低,所以就引入的静态jquery包

在webpack.base.conf.js中配置

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      jquery:path.resolve(__dirname,'../src/js/vendor/jquery-1.12.4.min'),
    }
  },

    plugins: [
         new webpack.ProvidePlugin({ 
                   $:"jquery", 
                   jQuery:"jquery", 
                   jquery: "jquery",
                  "windows.jQuery":"jquery"
          }) 
      ],

我现在输出jquery可以直接输出,但是输出插件包都是undefined

直接引入的问题

import carousel from "../js/owl.carousel.min.js"
import counterup from "../js/jquery.counterup.min.js"
import waypoint from "../js/waypoints.js"
import magnific from "../js/magnific.min.js"
import wow from "../js/wow.min.js"
import meanmenu from "../js/jquery.meanmenu.js"
import validator from "../js/form-validator.min.js"
import plugins from "../js/plugins.js"
import main from "../js/main.js"
import modernizr from "../js/vendor/modernizr-2.8.3.min.js"

会有这样的问题

图片描述

也尝试了使用imports-loader

import 'import-loader?this=>window!./js/owl.carousel.min.js'

抛出这样的错误

 ERROR  Failed to compile with 1 errors                                                                                                                                                   10:11:48 AM

This dependency was not found:

* exports?window.Zepto!../js/owl.carousel.min in ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0!./src/gmpage/mainPage.vue

To install it, you can run: npm install --save exports?window.Zepto!../js/owl.carousel.min

或许我使用方式不对?

请教大家应该如何解决引入插件包的问题,麻烦大神解答一下

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

此生挚爱伱 2022-09-18 22:26:41
    <!-- jquery latest version -->
    <script src="./static/js/jquery-1.12.4.min.js"></script>
    <!-- 其他各种插件 -->

把这些, 直接写在index.html里面

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文