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

Question

我有一个 nuxt 应用程序，其中包含一些第三方插件、gsap、split.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 存储桶时，除了键盘之外，一切正常。它根本不渲染。

我不知道如何让 simple-keyboard 插件在部署到 S3 时正确呈现。

Answer 1

我是 simple-keyboard 的创建者，我只是想更新此条目，因为它已在 Discord 聊天中解决。

问题出在这行代码中：

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

在本地环境中，pathname 确实是/welcome。但是，一旦推送到服务器，pathname 就变成了/welcome/，因此代码永远不会到达实例化键盘的部分。

希望对遇到类似问题的人有所帮助。