Vue: Con `espacios en blanco: 'condensar'`, los elementos contienen solo y los espacios se condensan en etiquetas vacías

Creado en 6 sept. 2019 · 6Comentarios · Fuente: vuejs/vue

Versión

4.0.0-rc.1

Enlace de reproducción

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

Información medioambiental

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

pasos para reproducir

Clonar el repositorio, npm install && npm run serve

¿Lo que es esperado?

La plantilla contiene un intervalo que contiene un carácter   . Este tramo tiene un fondo rojo. Por lo tanto, debería ver un pequeño cuadro rojo en la página.

¿Qué está pasando realmente?

El   en la plantilla se ignora y se convierte en un espacio normal, lo que significa que el elemento span no se muestra.

No puedo replicar este error en un Vue jsfiddle simple, ni en un proyecto que use vue-loader sin vue-cli. Por lo tanto, creo que algo en vue-cli puede ser el culpable en lugar de vue-template-compiler o Vue mismo.

bug compiler has PR

Fuente

tobyzerner

👍5

Comentario más útil

He transferido este problema al repositorio vue porque creo que es un error introducido en https://github.com/vuejs/vue/commit/e1abedb9e66b21da8a7e93e175b9dabe334dfebd

Vea otro informe de error en https://github.com/vuejs/vue/issues/9208#issuecomment -477811927

Solución alternativa actual:

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

sodatea en 6 sept. 2019

👍11 🎉1

Todos 6 comentarios

He transferido este problema al repositorio vue porque creo que es un error introducido en https://github.com/vuejs/vue/commit/e1abedb9e66b21da8a7e93e175b9dabe334dfebd

Vea otro informe de error en https://github.com/vuejs/vue/issues/9208#issuecomment -477811927

Solución alternativa actual:

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

sodatea en 6 sept. 2019

👍11 🎉1

¿Sería posible ignorar los espacios de pelo ( &hairsp; ) también ...?

_editar: lo siento, no vi el enlace del problema_

naton en 31 mar. 2020

@naton como se mencionó, esto debería discutirse en el repositorio de vue. Sodatea vinculó el problema

LinusBorg en 31 mar. 2020

@LinusBorg, ¿no es este el repositorio de Vue? El problema vinculado es el cambio original para agregar 'condensar', ¿no es así? También está cerrado.

Nos encontramos con esto hoy y estamos tratando de descubrir cómo solucionarlo. Hemos incorporado cierta automatización de localización que asume la configuración de 'condensar' (basado en la sugerencia de Evan de que esto sería predeterminado en 3.xy porque estoy de acuerdo con el comportamiento de condensar). Por lo tanto, hace que sea difícil volver a cambiar para conservar sin efectos secundarios potenciales.

chrisnicola en 9 abr. 2020

Ok, parece que simplemente sin incluir el nbsp; dentro de un elemento por sí solo resuelve el problema. Agregar esto como una nota para cualquier otra persona que se encuentre con esto.

chrisnicola en 9 abr. 2020

He transferido este problema al repositorio vue porque creo que es un error introducido en e1abedb
Vea otro informe de error en # 9208 (comentario)
Solución alternativa actual:
// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(args => {
            args.compilerOptions.whitespace = 'preserve'
          })
  }
}

Esto parece no funcionar más con Vue 3, arroja el error: "TypeError: No se puede establecer la propiedad 'espacio en blanco' de indefinido". ¿Alguna solución para Vue 3?