vue 引入 静态jquery插件有问题

Ybxdeideidei
  • 5
新手上路,请多包涵

有个需求,需要把一个由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

或许我使用方式不对?

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

评论
阅读 861
1 个回答
    <!-- jquery latest version -->
    <script src="./static/js/jquery-1.12.4.min.js"></script>
    <!-- 其他各种插件 -->

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

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏