Nuxt组件内通过head引入jsencrypt报错未定义，全局配置引入正常

• 执行时序差异：组件内通过head方法注入的外部脚本是异步加载的，不会阻塞组件渲染流程。mounted钩子会在组件挂载完成后立即触发，此时外部脚本还未加载完成，JSEncrypt未挂载到全局window对象上，因此会抛出未定义错误。
• 全局配置生效的原因：nuxt.config.js中配置的脚本是应用初始化阶段就提前加载的，到组件mounted执行时脚本已经加载完成，全局对象已挂载。

提示：如果项目开启了SSR模式，所有调用JSEncrypt的逻辑都要放在客户端侧执行，可以通过 process.client 条件判断包裹，避免服务端执行时报错。

方案1：给注入脚本添加加载完成回调 #

在head配置的脚本属性中添加onload回调，确保脚本加载完成后再执行初始化逻辑：

export default {
  data() {
    return {
      jsEncryptLoaded: false
    }
  },
  head() {
    return {
      script: [
        {
          src: "/js/jsencrypt.min.js",
          body: true,
          onload: () => {
            this.jsEncryptLoaded = true
            // 可直接在此处执行JSEncrypt初始化逻辑
          }
        }
      ]
    }
  },
  watch: {
    jsEncryptLoaded(newVal) {
      if (newVal) {
        const encrypt = new JSEncrypt()
        // 后续加密逻辑
      }
    }
  }
}

方案2：手动动态创建script标签加载 #

直接在mounted钩子中手动创建脚本标签，监听加载事件后执行逻辑：

export default {
  mounted() {
    // SSR模式下可加 if(process.client) 包裹以下逻辑
    const script = document.createElement('script')
    script.src = '/js/jsencrypt.min.js'
    script.onload = () => {
      const encrypt = new JSEncrypt()
      // 后续加密逻辑
    }
    document.body.appendChild(script)
  }
}

方案3：npm包按需引入（更推荐） #

直接安装jsencrypt的npm包，在组件内按需导入，无需额外配置脚本注入，打包时只会在该组件对应的路由chunk中引入依赖，不会增大全局包体积：

1. 执行安装命令：npm i jsencrypt
2. 组件内引入使用：

import JSEncrypt from 'jsencrypt'

export default {
  mounted() {
    const encrypt = new JSEncrypt()
    // 后续加密逻辑
  }
}

内容的提问来源于stack exchange，提问作者uneeb meer