Vue: Com `whitespace: 'condens'`, os elementos contêm apenas e os espaços são condensados ​​em tags vazias

Criado em 6 set. 2019  ·  6Comentários  ·  Fonte: vuejs/vue

Versão

4.0.0-rc.1

Link de reprodução

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

Informação do ambiente

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

Passos para reproduzir

Clone o repo, npm install && npm run serve

O que é esperado?

O modelo contém um intervalo contendo um caractere   . Esta extensão tem um fundo vermelho. Portanto, você deve ver uma pequena caixa vermelha na página.

O que realmente está acontecendo?

O   no modelo está sendo ignorado e convertido em um espaço normal, o que significa que o elemento span não é exibido.


Eu não posso replicar este bug em um simples Vue jsfiddle, nem um projeto usando vue-loader sem vue-cli. Portanto, acho que algo em vue-cli pode ser o culpado, em vez de vue-template-compilador ou o próprio Vue.

bug compiler has PR

Comentários muito úteis

Transferi esse problema para o repositório vue porque acredito que seja um bug introduzido em https://github.com/vuejs/vue/commit/e1abedb9e66b21da8a7e93e175b9dabe334dfebd

Veja outro relatório de bug em https://github.com/vuejs/vue/issues/9208#issuecomment -477811927

Solução alternativa atual:

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

Todos 6 comentários

Transferi esse problema para o repositório vue porque acredito que seja um bug introduzido em https://github.com/vuejs/vue/commit/e1abedb9e66b21da8a7e93e175b9dabe334dfebd

Veja outro relatório de bug em https://github.com/vuejs/vue/issues/9208#issuecomment -477811927

Solução alternativa atual:

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

Seria possível ignorar espaços de cabelo (   ) também ..?

_edit: desculpe, não vi o link do problema_

@naton conforme mencionado, isso deve ser discutido no

@LinusBorg este não é o

Acabamos de encontrar isso hoje e estamos tentando descobrir como contornar isso. Construímos alguma automação de localização que assume a configuração 'condensar' (com base na sugestão de Evan de que isso seria o padrão no 3.xe porque eu concordo com o comportamento de condensação). Portanto, fica difícil apenas trocar de volta para preservar sem efeitos colaterais potenciais.

Ok, parece que simplesmente não incluindo o nbsp; dentro de um elemento por si só resolve o problema. Adicionando isso como uma nota para qualquer outra pessoa que se depara com isso.

Transferi esse problema para o repositório vue porque acredito que seja um bug introduzido no e1abedb

Veja outro relatório de bug em # 9208 (comentário)

Solução alternativa atual:

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

Isso parece não funcionar mais com o Vue 3, ele gera o erro: "TypeError: Não é possível definir a propriedade 'espaço em branco' de indefinido". Alguma solução alternativa para o Vue 3?

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

loki0609 picture loki0609  ·  3Comentários

bfis picture bfis  ·  3Comentários

robertleeplummerjr picture robertleeplummerjr  ·  3Comentários

aviggngyv picture aviggngyv  ·  3Comentários

lmnsg picture lmnsg  ·  3Comentários