如何在Nuxt.js中使用第三方JS库？引入Kakao SDK报未定义错误原因

核心原因 #

• 执行环境不匹配：你将Kakao.init()直接写在login.vue的script顶级作用域，Nuxt默认开启服务端渲染(SSR)，这段代码会在服务端编译执行阶段就运行，而你配置在nuxt.config.js里的kakao.js是仅在客户端浏览器加载的脚本，服务端环境根本没有注入Kakao全局变量，自然会报未定义错误。
• 脚本加载时机不对：就算关闭SSR，你直接在script顶级作用域执行初始化，也可能出现kakao.js还没加载完成就执行初始化代码的情况，同样会触发报错。
• 全局变量访问规则问题：Nuxt中客户端侧的全局挂载变量默认挂载在window对象下，webpack编译时会把未声明的Kakao当做本地模块查找，找不到就会抛出引用错误，需要明确从window对象下读取。

修复方案 #

步骤1：修改nuxt.config.js的脚本配置，明确标注为客户端脚本 #

// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
  title: 'P-Cloud OCR',
  meta: [
    { 'http-equiv': 'X-UA-Compatible', content: 'IE=Edge' },
    { 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: 'https://developers.kakao.com/sdk/js/kakao.js', mode: 'client' },
  ]
},

步骤2：修改login.vue的初始化逻辑，放到客户端挂载钩子中执行，且明确读取window下的Kakao #

<script>
export default {
  // 仅在客户端挂载完成后执行
  mounted() {
    // 增加环境和变量存在判断，避免极端情况报错
    if (process.browser && window.Kakao) {
      window.Kakao.init('JAVASCRIPT_KEY');
      console.log('Kakao.isInitialized() >>', window.Kakao.isInitialized());
    }
  }
  // 其余原有逻辑
  ...
}
</script>

如果使用的是Nuxt3版本，可以把初始化逻辑写在onMounted钩子中，搭配process.client判断即可兼容。

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