2

我有一个 vanilla js jsencrypt包，我需要在我的 nuxt 应用程序中使用它，从Nuxt.config.js导入包本身时工作正常，但是在使用组件中的 head 对象导入时遇到问题，让我向您展示我的代码

nuxt.config.js //这可行

head: {
    title: 'App',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ],
    script: [
      {
        src: "/js/jsencrypt.min.js",
        body: true
      }
    ],
  },

组件调用//这不起作用

export default {

  head() {
      return {
        script: [
          {
             src: "/js/jsencrypt.min.js",
             body: true
          }
        ],
      }
    },
}

我正在使用理论上应该可以使用的头部标签，但它没有

挂载（）函数

mounted(){
    var encrypt = new JSEncrypt();
}

我收到错误消息

JSEncrypt is not defined

由于此类仅用于加密一个组件，因此在全球范围内注册它似乎不是明智之举，有人知道问题出在哪里吗？

4

1 回答 1

3

在你的 head 标签中引入 JSEnquiry 就可以了，但你需要留出时间让它下载和解析。在挂载的钩子中调用它是不允许的。

在您安装的钩子上试试这个。

const onAvailable = (variable, callback) => {
  function checkVariableIsAvailable(variable, callback) {
    if (typeof window[`${variable}`] === 'undefined') {
      setTimeout(function() {
        checkVariableIsAvailable(variable, callback)
      }, 1)
    } else {
      callback()
    }
  }
  checkVariableIsAvailable(variable, callback)
}

onAvailable('JSEncrypt', () => {
  var encrypt = new JSEncrypt();
}
于 2021-12-05T18:45:04.890 回答