Я хочу поместить несколько версий jquery в CDN в nuxt - PullRequest
Новая
       2

Я хочу поместить несколько версий jquery в CDN в nuxt

0 голосов
/ 14 апреля 2020

В настоящее время jQuery 3.1.4 загружается извне CDN на верхней странице.

index. vue

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

На нижней странице 1.8.3 включен в CDN из-за плагина jQuery.

** / index. vue

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

Несколько js, созданных с помощью jQuery, добавляются в активы каталог, модульный и импортированный. Есть еще несколько 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

Как мне скомпилировать отдельные jQuery версии с CDN?

После этого я проверил и установил он является внешним, так что он не читается в модуле 

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

Он может быть скомпилирован, но страница "Не удается найти модуль 'jQuery' из '/ ~'" и не видна.

1 Ответ

0 голосов
/ 23 апреля 2020

Это решение на данный момент от запроса на добавление / исправление вопроса? Пришел в.

  1. Создайте функцию, которая описывает процесс, который вы хотите инициализировать сразу после загрузки jquery в методах
  2. Зарегистрируйте событие с помощью функции beforemonted
  3. Сделайте возможным запуск этого события в сценарии загрузки on-head

После чтения jQuety путем загрузки в сценарий метода head методы fire 

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()
        }
      })
    }
}

удален смонтированный метод Другие как есть Так оно и работало.

...