【Nuxt】head에 기술한 JavaScript가 2회 실행되어 빠진 이야기 【SPA】
3178 단어 nuxt.js
증상
nuxt.config.js에서 다음 설정을 구성합니다.
nuxt.config.js mode: 'spa',
head: {
script: [
{
innerHTML: `(function(){console.log('HelloWorld!')}());`
}],
__dangerouslyDisableSanitizers: ['script'],
},
시작해보기
왜 HelloWorld!가 두 번 출력됩니다.
두 번 불리는 원인
mode: 'spa',
head: {
script: [
{
innerHTML: `(function(){console.log('HelloWorld!')}());`
}],
__dangerouslyDisableSanitizers: ['script'],
},
「html에 기재되어 있는 Script 태그」와 「nuxt.config.js에 정의되고 있는 Script 태그」로 비교되어, 차이가 있을 경우에 Script 태그가 재배치된다.
이 때 "nuxt.config.js에 정의 된 Script 태그"가 형식이 작성된 상태의 내용과 비교되기 때문에 차이가있는 것으로 간주되고 태그가 재배치됩니다.
html에 나열된 스크립트 태그
(function(){console.log('HelloWorld!')}());
비교에 사용되는 서식이 지정된 스크립트 태그
(function (){console.log('HelloWorld!')}());
대책
재배치된 Script 태그의 내용을 복사하고 nuxt.config.js의 내용을 바꿉니다.
nuxt.config.js mode: 'spa',
head: {
script: [
{
innerHTML: `(function(){console.log('HelloWorld!')}());`
}],
__dangerouslyDisableSanitizers: ['script'],
},
Reference
이 문제에 관하여(【Nuxt】head에 기술한 JavaScript가 2회 실행되어 빠진 이야기 【SPA】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/shigureaya/items/093e301bf8ebcb9d5bcd
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
mode: 'spa',
head: {
script: [
{
innerHTML: `(function(){console.log('HelloWorld!')}());`
}],
__dangerouslyDisableSanitizers: ['script'],
},
Reference
이 문제에 관하여(【Nuxt】head에 기술한 JavaScript가 2회 실행되어 빠진 이야기 【SPA】), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/shigureaya/items/093e301bf8ebcb9d5bcd텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
