Vue: `whitespace : condense`를 사용하면 의미있는 모든 & nbsp;가 공백으로 변환됩니다.

에 만든 2020년 01월 29일 · 5코멘트 · 출처: vuejs/vue

버전

2.6.11

복제 링크

https://gist.github.com/aimozg/c073eea5a55062e3dcd8f887a8567807

재현 단계

Node.js에서 example.js를 실행합니다.

대체 단계 / 자세한 설명 :

whitespace: 'condense' Vue 템플릿 컴파일러를 설정합니다. (vue-cli의 기본값).
  엔티티가있는 렌더링 템플릿 (예 : <p>a b</p>
실제 비줄 바꿈 공백 문자에 대한 템플릿 검사

무엇을 기대합니까?

  되지 않는 공백 문자로 렌더링 된

---- whitespace: condense
// code
NBSP FOUND

실제로 무슨 일이 일어나고 있습니까?

  엔티티는 일반 공간으로 렌더링되며 example.js 출력에는 다음이 포함됩니다.

---- whitespace: condense
// code
NBSP NOT FOUND

공백은 다음 컴파일러 코드에 의해 제거됩니다.

if (!inPre && whitespaceOption === 'condense') {
  // condense consecutive whitespaces into single space
  text = text.replace(whitespaceRE, ' ')
}

및 " " 은 이전에 엔티티 디코더를 사용하여 "\xA0" 로 대체됩니다.

제안 :

/[ \t\r\n]+/g 와 같이 더 좁은 공백 RE 정규식.

bug compiler has PR

출처

aimozg

👍5

가장 유용한 댓글

일반적으로 깨지지 않는 공간을 만지지 않아야하지 않습니까? 그것이 제 템플릿에서 사용한다면 개인적으로 기대하는 것입니다. 또한 언급 한 문제를 해결합니다.

posva 에 2020년 01월 29일

👍4

모든 5 댓글

posva 에 2020년 01월 29일

👍4

공백이있는 Vue 템플릿 컴파일러 설정 : 'condense'. (vue-cli의 기본값) .

잠깐, 혼란 스러워요. condense 실제로 기본값입니까? preserve 이 실제로 기본값이라고 주장하는 항목이 여러 개 있습니다.

나는 깨지지 않는 공간이 작동하지 않는 이유를 파악하기 위해 고군분투하고 있습니다. 강제 보존을 시도하려고했지만 다음을 보았습니다.

Evan, 기본값은 preserve https://github.com/vuejs/vue/issues/9208#issuecomment -450012518

그리고 https://github.com/vuejs/vue/tree/dev/packages/vue-template-compiler#options 문을 반영하는 컴파일러 옵션 문서

이제 @aimozg 가 condense 가 실제로 기본값이라고 말하는 것을 본 후, 저는 계속해서 preserve 수동으로 설정했습니다. 모든 것이 정상으로 돌아 왔습니다!

문서 / 구현이 잘못 되었습니까?

어느 쪽이든 응축이 nbsp를 제거하는 이유는 무엇입니까? 매우 예상치 못한 동작입니다. 나는 그들이 만져서는 안된다는 데 동의합니다.

chasebank 에 2020년 04월 30일

👍3

이전 버전과의 호환성을 보장하기 위해 Vue 코어에 공백이 유지되며 최신 버전의 Vue CLI에서는 기본적으로 condense 로 구성합니다.

Justineo 에 2020년 05월 01일

이스케이프 된 탭 	 와 동일

코드를 표시하기가 매우 어렵습니다.

baybal 에 2020년 05월 24일

병합되기를 기다리는 중 ..
현재 해결 방법
사용하다

{{'\xa0'}}

대신에

&nbsp;

Tofandel 에 2020년 09월 16일

이 페이지가 도움이 되었나요?

0 / 5 - 0 등급

Vue: `whitespace : condense`를 사용하면 의미있는 모든 &amp; nbsp;가 공백으로 변환됩니다.

버전