Esta fuente funcionó en un archivo html.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Kakao JavaScript SDK</title> <script src="https://developers.kakao.com/sdk/js/kakao.js"></script> <script> // SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정해 주세요. Kakao.init('JAVASCRIPT_KEY'); // SDK 초기화 여부를 판단합니다. console.log(Kakao.isInitialized()); </script> </head> <body></body> </html>Así que pensé que la próxima fuente funcionará en Nuxt.js.
Pero solo mostró
'Error de referencia
Kakao no está definido' en estas fuentes
en 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'}, ] }, ```en páginas/login.vue
<script> export default { ... } Kakao.init('JAVASCRIPT_KEY'); console.log('Kakao.isInitialized() >>', Kakao.isInitialized()); </script>¿Por qué no funciona esta fuente?
Básicamente, hay 2 enfoques que puede hacer:
1. Cargue la biblioteca directamente en su diseño/página/componente
head () { if (window.Kakao) { this.afterKakaoLoaded() return } return { script: [ { hid: 'kakao', src: 'https://developers.kakao.com/sdk/js/kakao.js', callback: () => { this.afterKakaoLoaded() } } ] } }, methods: { afterKakaoLoaded () { window.Kakao.init('...') } }2. Cargue la biblioteca dentro de un complemento
Josh Deltener escribió un excelente artículo sobre cómo lograrlo: https://deltener.com/blog/nuxt-third-party-code-is-poison/
En nuxt puede sobrescribir el .nuxt/views/app.template.html .
Debe crear el archivo app.html en la raíz del proyecto. Luego coloque el siguiente código dentro de este archivo:
aplicación.html
<!DOCTYPE html> <html lang="en" {{ HTML_ATTRS }}> <head {{ HEAD_ATTRS }}> {{ HEAD }} </head> <body {{ BODY_ATTRS }}> {{ APP }} </body> </html>Luego puede seguir la forma tradicional que mencionó en cuestión:
<!DOCTYPE html> <html lang="en" {{ HTML_ATTRS }}> <head {{ HEAD_ATTRS }}> {{ HEAD }} <script src="https://developers.kakao.com/sdk/js/kakao.js"></script> <script> // SDK를 초기화 합니다. 사용할 앱의 JavaScript 키를 설정해 주세요. Kakao.init('JAVASCRIPT_KEY'); // SDK 초기화 여부를 판단합니다. console.log(Kakao.isInitialized()); </script> </head> <body {{ BODY_ATTRS }}> {{ APP }} </body> </html>Pero tenga en cuenta que en este método, todas las páginas de su aplicación cargan este script.