Question

我有一个nuxt应用，其中包含一些第三方插件，gsap，splitting.js等。所有插件都能正常工作。

我有一个简单键盘插件，加载方式与其他插件相同，它在本地加载正常，但是在我运行nuxt generate并将dist文件夹上传到s3存储桶后，键盘/插件未显示。控制台中也没有错误。我不确定要删除什么？

我已经在plugins目录中创建了一个文件，如下所示：

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}': '&nbsp;&nbsp;&nbsp;'
    },
    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后正确呈现。

Answer 1

我是简单键盘的创建者，只是想更新此条目，因为它已在Discord聊天中解决。

问题出在这行代码中：

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

在本地环境中，pathname的确是/welcome。但是，一旦被推到服务器上，pathname就变成了/welcome/，因此代码再也没有到达实例化键盘的位置。

希望能帮助遇到类似问题的任何人。

如何使用Nuxt为s3存储桶加载插件？

1 个答案: