静态导入适用于 nuxt.config.js 但不适用于组件

Question

我有一个 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
          }
        ],
      }
    },
}

我正在使用 head 标签，理论上它应该可以工作，但它没有

mounted() 函数

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

我收到错误消息

JSEncrypt is not defined

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

Answer 1

在您的 head 标记中引入 JSEnquiry 会工作得很好，但您需要留出时间来下载和解析它。在 mounted hook 中调用它是不允许的。

在你挂载的钩子上试试这个。

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();
}

静态导入适用于 nuxt.config.js 但不适用于组件

static import works from nuxt.config.js but not from component

javascript

vue.js

jsencrypt

nuxt.js