我想在nuxt的CDN中放入多个版本的jquery

Question

当前，首页上的CDN正在外部加载jQuery 3.1.4。

index.vue

head: {
    bodyAttrs: {
      id: 'overview'
    },
    script: [
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js'
      }
    ]
  }

在下面的页面中，由于jQuery插件，CDN中包含1.8.3。

** / index.vue

head: {
    bodyAttrs: {
      id: 'lower'
    },
    script: [
      {
        src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js'
      }
    ]
  }

使用jQuery创建的多个js放在资产目录中，进行模块化和导入。还有其他一些js文件。

ex）〜/ assets / useragent.js

/* global $ */
export default function () {
  // User agent
  var _ua = (function (u) {
    return {
      Tablet: (u.indexOf("windows") != -1 && u.indexOf("touch") != -1 && u.indexOf("tablet pc") == -1) || u.indexOf("ipad") != -1 || (u.indexOf("android") != -1 && u.indexOf("mobile") == -1) || (u.indexOf("firefox") != -1 && u.indexOf("tablet") != -1) || u.indexOf("kindle") != -1 || u.indexOf("silk") != -1 || u.indexOf("playbook") != -1,
      Mobile: (u.indexOf("windows") != -1 && u.indexOf("phone") != -1) || u.indexOf("iphone") != -1 || u.indexOf("ipod") != -1 || (u.indexOf("android") != -1 && u.indexOf("mobile") != -1) || (u.indexOf("firefox") != -1 && u.indexOf("mobile") != -1) || u.indexOf("blackberry") != -1
    }
  })(window.navigator.userAgent.toLowerCase());

  // Is in viewport
  $.fn.isInViewport = function (screen) {
    var elementTop = $(this).offset().top;
    var elementBottom = elementTop + $(this).outerHeight();

    var viewportTop = $(window).scrollTop();
    var viewportBottom = (viewportTop + $(window).height()) * screen;

    return elementBottom > viewportTop && elementTop < viewportBottom;
  };

  $(window).on('load resize scroll', function () {
    $('.shuffle-item--visible').each(function () {
      if ($(this).isInViewport(4)) {
        $(this).addClass('in_viewport');
      } else {
        $(this).removeClass('in_viewport');
      }
    });
  });
}

index.vue

mounted: function() {
    this.$nextTick(() => {
      if (process.browser) {
        JqueryEasing()
        MagnificPopup()
        useragent()
        }
    })
  }
}

当我检查它时，我补充说以下内容应在nuxt.config.js中描述。

nuxt.config.js

build: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.$': 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
}

当我运行npm run dev时，出现以下错误，并且无法编译。

These dependencies were not found:                    friendly-errors 17:19:16
                                                      friendly-errors 17:19:16
* $ in ./assets/js/useragent.js            friendly-errors 17:19:16
* jQuery in ./plugins/02_jquery.easing.1.3.min.js     friendly-errors 17:19:16
                                                      friendly-errors 17:19:16
To install them, you can run: npm install --save $ jQuery

如何使用CDN编译单独的jQuery版本？

之后，我检查了它并将其设置为外部，以便在模块中不读取它

build: {
    extend(config, ctx) {
      config.externals = {
        jquery: 'jQuery'
      };
    }
}

可以编译，但是页面是“无法从'/〜'找到模块'jQuery'”，并且看不到。

Answer 1

从请求补充/更正到问题暂时解决了吗？来到。

1. 使函数描述您要在方法中加载jQuery后立即初始化的过程
2. 使用预先设置的功能注册事件
3. 可以在头脚本的加载中触发该事件

在通过onload读取head方法的脚本读取jQuety之后，方法启动

head() {
    return {
      bodyAttrs: {
        id: 'photographer'
      },
      script: [
        {
          src:
            'https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js',
          async: true,
          onload: this.onJqueryLoad()
        }
      ]
    }
}

输入阅读后要触发的方法

methods: {
    onJqueryLoad() {
      this.$nextTick(() => {
        if (process.browser) {
          JqueryEasing()
        　MagnificPopup()
        　useragent()
        }
      })
    }
}

安装方法已删除照原样因此有效。