如何使用 Nuxt 为 s3 bucket 加载插件？

Question

我有一个带有一些第三方插件、gsap、splitting.js 等的 nuxt 应用程序。所有插件都可以正常工作。

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

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

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 bucket 加载插件？

How to load plugin for s3 bucket with Nuxt?

vue.js

server-side-rendering

nuxt.js