undefinedfix
Sign in

There is a problem in introducing static jQuery plug-in into Vue

thexiv edited in Sat, 24 Sep 2022

There is a requirement to introduce a static page composed of jQuery and bootstrap into the Vue page. Now jQuery and bootstrap have been introduced into the Vue page

Related plug-ins have these

    <!-- 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>

These are static JS files

The way I introduced jquery

Because directly using the jQuery package installed by NPM will prompt me that the jQuery version is too low, so the static jQuery package is introduced

stay webpack.base.conf Configuration in. 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"
          }) 
      ],

Now I can output jQuery directly, but the output plug-in package is undefined

Problems directly introduced

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"

There will be such a problem

图片描述

We also try to use imports loader

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

Throw such a mistake

 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

Maybe I use it in the wrong way?

Ask you how to solve the problem of introducing plug-in package, please answer it

1 Replies
user617611
commented on Sat, 24 Sep 2022
    <!-- jquery latest version -->
    <script src="./static/js/jquery-1.12.4.min.js"></script>
    <!-- 其他各种插件 -->

Write these directly in the index.html inside