Как загрузить плагин для S3 Bucket с Nuxt? - PullRequest
Новая
       16

Как загрузить плагин для S3 Bucket с Nuxt?

0 голосов
/ 24 апреля 2019

У меня есть приложение nuxt с несколькими сторонними плагинами, gsap, splitting.js и т. Д. Все плагины работают нормально, как и должно.

У меня плагин для простой клавиатуры загружается так же, как и другие, он загружается нормально локально, но после запуска nuxt generate и загрузки папки dist в корзину s3 клавиатура / плагин не отображается. В консоли также нет ошибок. Я не уверен, что это удаляет?

Я создал файл в каталоге плагинов так:

plugins/simple-keyboard.js

В моем файле nuxt.config.js, который я поместил: 

plugins: [
    { src: '~plugins/fastclick.js', ssr: false },
    { src: '~plugins/splitting.js', ssr: false },
    { src: '~plugins/simple-keyboard.js', ssr: false },
    { src: '~plugins/maskedinput.js', ssr: false }
  ],

Вот содержимое моего plugins/simple-keyboard.js файла: 

import Keyboard from 'simple-keyboard';
import inputMask from "simple-keyboard-input-mask";
import 'simple-keyboard/build/css/index.css';

if(window.location.pathname == '/welcome') {
  let keyboard = new Keyboard({
    onChange: input => onChange(input),
    onKeyPress: button => onKeyPress(button),
    layout: {
      default: ["1 2 3", "4 5 6", "7 8 9", "{C} 0 "],
      shift: [" ABC DEF", "GHI JKL MNO", "PQRS TUV WXYZ"]
    },
    theme: "keyboard hg-theme-default hg-layout-numeric numeric-theme",
    disableCaretPositioning: true,
    inputMask: "(888) 888-8888",
    modules: [inputMask],
    syncInstanceInputs: true
  })

  let backspace = new Keyboard(".backspace", {
    onChange: input => onChange(input),
    onKeyPress: button => onKeyPress(button),
    layout: {
      default: ["{bksp}"]
    },
    mergeDisplay: true,
    display: {
      '{bksp}': '   '
    },
    theme: "hg-theme-default hg-layout-numeric numeric-theme",
    syncInstanceInputs: true
  })

  function onChange(input) {
    document.querySelector(".input").value = input;
  }

  function clearKeyboard() {
    keyboard.clearInput();
    document.querySelector(".input").value = '';
  }

  function onKeyPress(button) {
    if (button === "{C}") clearKeyboard();
  }

}

Локально все отлично работает. Даже когда я размещаю его на локальном PHP-сервере и указываю на файл dist. все работает нормально. Когда я запускаю команду сборки и внедряю содержимое в мое хранилище S3, все работает, кроме клавиатуры. Это просто не делает.

Я не могу понять, как заставить плагин для простой клавиатуры правильно отображаться при развертывании на S3.

1 Ответ

1 голос
/ 25 апреля 2019

Я - создатель простой клавиатуры и просто хотел обновить эту запись, поскольку она была разрешена в чате Discord.

Проблема была в этой строке кода: 

if(window.location.pathname == '/welcome') { ...

В локальной среде pathname действительно было /welcome. Однако после отправки на сервер значение pathname стало /welcome/, поэтому код так и не попал в ту часть, где создается клавиатура.

Надеюсь, это поможет любому, кто столкнулся с подобной проблемой.

...