Vue.js/Nuxt中a标签href调用函数及Kakao未定义报错问询

问题原因与解决方案 #

1. 报错「Kakao is not defined」的原因 #

• Kakao SDK 是挂载在浏览器window全局对象上的，你代码中直接写Kakao，Nuxt 编译/服务端渲染阶段找不到该全局变量，就会抛出未定义错误。
• 若为页面运行时报错，大概率是 SDK 还没加载完成，就执行了 mounted 里的初始化代码/登录调用代码。

2. :href="your_function()"写法是否正确？ #

该写法完全错误。
原生href="javascript:函数()"是点击后执行脚本的逻辑，但 Vue 中的:href是动态绑定链接属性的语法，你给它赋值函数的话，会在组件渲染时立刻执行函数，而非点击时触发，完全不符合预期。

修复步骤 #

第一步：调整nuxt.config.js配置 #

给引入的SDK脚本加body: true配置，让脚本插入到body底部加载，避免阻塞页面渲染：

export default {
  head: {
    script: [
      { src: 'https://developers.kakao.com/sdk/js/kakao.js', body: true },
    ]
  },
}

第二步：修改login.vue代码 #

模板部分

将:href替换为@click.prevent，@click是Vue的点击事件绑定语法，.prevent修饰符用来阻止a标签默认的跳转行为：

<template>
   <a @click.prevent="loginWithKakao">
     <img
       src="https://k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
       width="222"
     />
   </a>          
</template>

逻辑部分

所有调用Kakao的地方都加上window.前缀，同时增加加载判断避免脚本未加载完成时报错：

<script>
export default {
  data() {
    return {
      visible: true,
      account: '',
      password: '',
    }
  },
  computed: {
    ...mapState('store', { logo: (state) => state.logo }),
  },
  methods: {
    loginWithKakao() {
      // 先判断Kakao是否加载完成
      if (!window.Kakao) return
      window.Kakao.Auth.login({
        success: function (response) {
          window.Kakao.API.request({
            url: '/v2/user/me',
            success: function (response) {
              console.log(response)
            },
            fail: function (error) {
              console.log(error)
            },
          })
        },
        fail: function (error) {
          console.log(error)
        },
      })
    },       
  },
  mounted(){
    if (window.Kakao) {
      window.Kakao.init('你的JavaScript key');
      console.log('Kakao.isInitialized() >>', window.Kakao.isInitialized());
    }
  },
}
</script>

可选补充（解决ESLint校验报错） #

如果编译时还是报Kakao未定义的ESLint错误，可在项目根目录的.eslintrc.js中增加全局变量配置：

module.exports = {
  globals: {
    Kakao: 'readonly'
  }
}

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