Vue: Avec `whitespace: 'condense'`, les éléments contiennent uniquement et les espaces sont condensés en balises vides

Créé le 6 sept. 2019 · 6Commentaires · Source: vuejs/vue

Version

4.0.0-rc.1

Lien de reproduction

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

Informations sur l'environnement

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

Étapes à suivre pour reproduire

Clonez le dépôt, npm install && npm run serve

Qu'attend-on?

Le modèle contient une étendue contenant un caractère   . Cette travée a un fond rouge. Ainsi, vous devriez voir une petite boîte rouge sur la page.

Que se passe-t-il réellement?

Le   dans le modèle est ignoré et converti en un espace normal, ce qui signifie que l'élément span n'est pas affiché.

Je ne peux pas répliquer ce bogue dans un simple Vue jsfiddle, ni dans un projet utilisant vue-loader sans vue-cli. Ainsi, je pense que quelque chose dans vue-cli peut être le coupable plutôt que vue-template-compiler ou Vue lui-même.

bug compiler has PR

Source

tobyzerner

👍5

Commentaire le plus utile

J'ai transféré ce problème dans le référentiel vue car je pense que c'est un bogue introduit dans https://github.com/vuejs/vue/commit/e1abedb9e66b21da8a7e93e175b9dabe334dfebd

Voir un autre rapport de bogue sur https://github.com/vuejs/vue/issues/9208#issuecomment -477811927

Solution de contournement actuelle:

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

sodatea le 6 sept. 2019

👍11 🎉1

Tous les 6 commentaires

J'ai transféré ce problème dans le référentiel vue car je pense que c'est un bogue introduit dans https://github.com/vuejs/vue/commit/e1abedb9e66b21da8a7e93e175b9dabe334dfebd

Voir un autre rapport de bogue sur https://github.com/vuejs/vue/issues/9208#issuecomment -477811927

Solution de contournement actuelle:

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

sodatea le 6 sept. 2019

👍11 🎉1

Serait-il possible d'ignorer également les espaces ( &hairsp; ) ..?

_edit: désolé, je n'ai pas vu le problème link_

naton le 31 mars 2020

@naton comme mentionné, cela devrait être discuté dans le repo vue. Sodatea a lié le problème

LinusBorg le 31 mars 2020

@LinusBorg n'est-ce pas le repo Vue? Le problème lié est la modification d'origine pour ajouter «condenser» n'est-ce pas? Il est également fermé.

Nous venons de tomber sur ce problème aujourd'hui et essayons de trouver un moyen de le contourner. Nous avons intégré une certaine automatisation de localisation qui suppose le paramètre «condenser» (basé sur la suggestion d'Evan que ce serait par défaut dans 3.x et parce que je suis d'accord avec le comportement de condensation). Il est donc difficile de simplement revenir pour conserver sans effets secondaires potentiels.

chrisnicola le 9 avr. 2020

Ok, il semble que tout simplement ne pas inclure le nbsp; l'intérieur d'un élément résout à lui seul le problème. Ajouter ceci comme une note pour toute autre personne qui rencontre cela.

chrisnicola le 9 avr. 2020

J'ai transféré ce problème dans le référentiel vue car je pense que c'est un bogue introduit dans e1abedb
Voir un autre rapport de bogue au # 9208 (commentaire)
Solution de contournement actuelle:
// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(args => {
            args.compilerOptions.whitespace = 'preserve'
          })
  }
}

Cela ne semble plus fonctionner avec Vue 3, cela génère l'erreur: "TypeError: Impossible de définir la propriété 'whitespace' sur undefined". Une solution de contournement pour Vue 3?