Vue: `whitespace : 'condense'`를 사용하면 요소 만 포함되고 공백은 빈 태그로 압축됩니다.

에 만든 2019년 09월 06일 · 6코멘트 · 출처: vuejs/vue

버전

4.0.0-rc.1

복제 링크

https://github.com/tobyzerner/vue-cli-nbsp-bug

환경 정보

Environment Info:
  System:
    OS: macOS 10.14.6
    CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
  Binaries:
    Node: 10.15.3 - /usr/local/bin/node
    Yarn: 1.17.3 - ~/.npm-global/bin/yarn
    npm: 6.11.3 - ~/.npm-global/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 68.0.2
    Safari: 12.1.2
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.0.0
    @vue/babel-preset-app:  4.0.0-rc.1
    @vue/babel-preset-jsx:  1.1.0
    @vue/babel-sugar-functional-vue:  1.0.0
    @vue/babel-sugar-inject-h:  1.0.0
    @vue/babel-sugar-v-model:  1.0.0
    @vue/babel-sugar-v-on:  1.1.0
    @vue/cli-overlay:  4.0.0-rc.1
    @vue/cli-plugin-babel: ^4.0.0-rc.1 => 4.0.0-rc.1
    @vue/cli-plugin-eslint: ^4.0.0-rc.1 => 4.0.0-rc.1
    @vue/cli-service: ^4.0.0-rc.1 => 4.0.0-rc.1
    @vue/cli-shared-utils:  4.0.0-rc.1
    @vue/component-compiler-utils:  3.0.0
    @vue/preload-webpack-plugin:  1.1.1
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^5.0.0 => 5.2.3
    vue: ^2.6.10 => 2.6.10
    vue-eslint-parser:  5.0.0
    vue-hot-reload-api:  2.3.3
    vue-loader:  15.7.1
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.10 => 2.6.10
    vue-template-es2015-compiler:  1.9.1
  npmGlobalPackages:
    @vue/cli: 4.0.0-rc.1

재현 단계

저장소, npm install && npm run serve 복제

무엇을 기대합니까?

템플릿에는   문자가 포함 된 범위가 있습니다. 이 범위는 빨간색 배경입니다. 따라서 페이지에 작은 빨간색 상자가 표시되어야합니다.

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

템플릿의   이 무시되고 일반 공백으로 변환됩니다. 이는 span 요소가 표시되지 않음을 의미합니다.

이 버그는 일반 Vue jsfiddle이나 vue-cli없이 vue-loader를 사용하는 프로젝트에서 복제 할 수 없습니다. 따라서 나는 vue-cli의 무언가가 vue-template-compiler 또는 Vue 자체가 아닌 범인이라고 생각합니다.

bug compiler has PR

출처

tobyzerner

👍5

가장 유용한 댓글

이 문제는 https://github.com/vuejs/vue/commit/e1abedb9e66b21da8a7e93e175b9dabe334dfebd에 소개 된 버그라고 믿기 때문에 vue 저장소로 전송했습니다.

https://github.com/vuejs/vue/issues/9208#issuecomment -477811927에서 다른 버그 보고서를

현재 해결 방법 :

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(args => {
            args.compilerOptions.whitespace = 'preserve'
          })
  }
}

sodatea 에 2019년 09월 06일

👍11 🎉1

모든 6 댓글

이 문제는 https://github.com/vuejs/vue/commit/e1abedb9e66b21da8a7e93e175b9dabe334dfebd에 소개 된 버그라고 믿기 때문에 vue 저장소로 전송했습니다.

https://github.com/vuejs/vue/issues/9208#issuecomment -477811927에서 다른 버그 보고서를

현재 해결 방법 :

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(args => {
            args.compilerOptions.whitespace = 'preserve'
          })
  }
}

sodatea 에 2019년 09월 06일

👍11 🎉1

헤어 스페이스 ( &hairsp; )도 무시할 수 있습니까 ..?

_edit : 죄송합니다. 문제 링크를 보지 못했습니다 _

naton 에 2020년 03월 31일

언급했듯이 @naton 은 vue repo에서 논의되어야합니다. Sodatea는 문제를 연결했습니다

LinusBorg 에 2020년 03월 31일

@LinusBorg 가 Vue 레포가 아닙니까? 링크 된 이슈는 원래의 '콘 덴스'를 추가하는 변경이 아닌가요? 또한 폐쇄됩니다.

우리는 오늘 이것을 만났고 그것을 해결하는 방법을 알아 내려고 노력하고 있습니다. 우리는 '축약'설정을 가정하는 일부 현지화 자동화를 구축했습니다 (Evan의 제안에 따라 3.x에서 기본값이 될 것이며 제가 축약 동작에 동의하기 때문입니다). 따라서 잠재적 인 부작용없이 보존하기 위해 다시 교체하기가 어렵습니다.

chrisnicola 에 2020년 04월 09일

좋아 단순히 nbsp; 요소 내부 자체가 문제를 해결합니다. 이 문제를 겪는 다른 사람을위한 메모로 추가합니다.

chrisnicola 에 2020년 04월 09일

e1abedb에 도입 된 버그라고 생각하기 때문에이 문제를 vue 저장소로 전송했습니다.
# 9208 (댓글) 에서 다른 버그 보고서를 참조하십시오.
현재 해결 방법 :
// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(args => {
            args.compilerOptions.whitespace = 'preserve'
          })
  }
}

이것은 Vue 3에서 더 이상 작동하지 않는 것 같습니다. "TypeError : Cannot set property 'whitespace'of undefined"오류가 발생합니다. Vue 3에 대한 해결 방법이 있습니까?

antoniandre 에 2020년 09월 29일

👍2 👀1

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

0 / 5 - 0 등급