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要素は表示されません。


プレーンなVuejsfiddleでも、vue-cliなしでvue-loaderを使用するプロジェクトでも、このバグを再現することはできません。 したがって、vue-cliの何かが、vue-template-compilerやVue自体ではなく、原因である可能性があると思います。

bug compiler has PR

最も参考になるコメント

この問題は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'
          })
  }
}

全てのコメント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'
          })
  }
}

ヘアスペース(   )も無視することは可能でしょうか..?

_編集:申し訳ありませんが、問題のリンクが表示されませんでした_

@natonで述べたように、これはvueリポジトリで説明する必要があります。 Sodateaは問題をリンクしました

@LinusBorgこれはVueレポではありませんか? リンクされた問題は、「凝縮」を追加するための元の変更です。 また、閉鎖されています。

私たちは今日これに遭遇し、それを回避する方法を見つけようとしています。 'condense'設定を想定したローカリゼーション自動化が組み込まれています(これは3.xではデフォルトであるというEvanの提案に基づいており、condenseの動作に同意するため)。 そのため、潜在的な副作用なしに保存するために単にスワップバックすることは困難です。

わかりました、単にnbspを含まないようです。 要素の内部はそれ自体で問題を解決します。 これに遭遇した他の人へのメモとしてこれを追加します。

この問題はe1abedbvueリポジトリに転送しました。

#9208(コメント)で別のバグレポートを参照してください

現在の回避策:

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

これはVue3では機能しなくなったようです。「TypeError:undefinedのプロパティ 'whitespace'を設定できません」というエラーがスローされます。 Vue 3の回避策はありますか?

このページは役に立ちましたか?
0 / 5 - 0 評価