Vue: С `whitespace: 'condense' элементы содержат только, а пробелы сжимаются в пустые теги

Созданный на 6 сент. 2019 · 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-loader без vue-cli. Поэтому я думаю, что виновником может быть что-то в vue-cli, а не vue-template-compiler или сам Vue.

bug compiler has PR

Источник

tobyzerner

👍5

Самый полезный комментарий

Я перенес эту проблему в репозиторий vue потому что считаю, что это ошибка, представленная в https://github.com/vuejs/vue/commit/e1abedb9e66b21da8a7e93e175b9dabe334dfebd

См. Еще один отчет об ошибке на 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 6 сент. 2019

👍11 🎉1

Все 6 Комментарий

См. Еще один отчет об ошибке на 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 6 сент. 2019

👍11 🎉1

Можно ли также игнорировать пространства для волос ( &hairsp; ) ..?

_edit: извините, не видел ссылку на проблему_

naton 31 мар. 2020

@naton, как уже упоминалось, это следует обсудить в

LinusBorg 31 мар. 2020

@LinusBorg, разве это не

Мы столкнулись с этим сегодня и пытаемся понять, как это обойти. Мы встроили некоторую автоматизацию локализации, которая предполагает настройку «уплотнения» (на основе предположения Эвана, что это будет по умолчанию в 3.x, и потому что я согласен с режимом уплотнения). Таким образом, сложно просто поменять местами, чтобы сохранить без потенциальных побочных эффектов.

chrisnicola 9 апр. 2020

Хорошо, кажется, что просто не включая nbsp; внутри элемента решает проблему. Добавьте это как примечание для всех, кто сталкивается с этим.

chrisnicola 9 апр. 2020

Я перенес эту проблему в репозиторий vue потому что считаю, что это ошибка, появившаяся в e1abedb
См. Еще один отчет об ошибке на # 9208 (комментарий)
Текущее решение:
// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(args => {
            args.compilerOptions.whitespace = 'preserve'
          })
  }
}

Похоже, что это больше не работает с Vue 3, выдает ошибку: «TypeError: невозможно установить свойство« пробел »на undefined». Есть ли способ обхода Vue 3?