Nuxt.js의 몇 가지 일반적인 문제(자세한 튜토리얼)

이 글은 주로 Nuxt.js 함정에 대한 요약과 공유를 소개하고 있습니다.

빌드 문제

1. js 파일을 head에 삽입하는 방법은 무엇입니까?

Background: 태그에flexible.js 파일을 인라인으로 삽입합니다. 본 프로젝트는 주로 모바일 단말 프로젝트로, 모바일 단말 적응 문제를 실현하기 위해flexible.js를 도입했습니다.
Nuxt.js는 vue-meta를 통해 헤더 태그 관리를 구현합니다. 설명서를 보면 다음과 같이 구성할 수 있음을 발견했습니다.

// nuxt.config.js
head: {
 script: [
  { innerHTML: 'console.log("hello")', type: 'text/javascript', charset: 'utf-8'}
 ]
}

결과적으로 html이 생성됩니다.

<script data-n-head="true" type="text/javascript" charset="utf-8">console.log("hello")</script>

vue-meta가 이스케이프되었음을 발견했습니다. 따옴표를 추가하고 __dangerouslyDisableSanitizers: ['script'] 뒤에 추가하면 이 문자는 더 이상 이스케이프되지 않습니다. 이 필드를 주의해서 사용하세요.

다음으로, console.log("hello") 내용을flexible.js로 교체합니다. 구성 업그레이드 후:

head: {
 script: [{ innerHTML: require('./assets/js/flexible'), type: 'text/javascript', charset: 'utf-8'}],
 __dangerouslyDisableSanitizers: ['script']
}

피트를 성공적으로 밟았습니다. 다음 피트...

2. 전처리기

배경: 구성 요소의