Vue: Dengan `whitespace: 'condense'`, elemen hanya berisi dan spasi diringkas menjadi tag kosong

Dibuat pada 6 Sep 2019  ·  6Komentar  ·  Sumber: vuejs/vue

Versi: kapan

4.0.0-rc.1

Tautan reproduksi

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

Info lingkungan

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

Langkah-langkah untuk mereproduksi

Gandakan repo, npm install && npm run serve

Apa yang diharapkan?

Template berisi span yang berisi karakter   . Rentang ini memiliki latar belakang merah. Dengan demikian Anda akan melihat kotak merah kecil di halaman.

Apa yang sebenarnya terjadi?

  dalam template diabaikan dan diubah menjadi ruang normal, yang berarti elemen span tidak ditampilkan.

Saya tidak dapat mereplikasi bug ini dalam Vue jsfiddle biasa, atau proyek yang menggunakan vue-loader tanpa vue-cli. Jadi saya pikir sesuatu di vue-cli mungkin pelakunya daripada vue-template-compiler atau Vue itu sendiri.

bug compiler has PR
Sumber
picture tobyzerner
👍5

Komentar yang paling membantu

Saya telah mentransfer masalah ini ke repositori vue karena saya yakin ini adalah bug yang diperkenalkan di https://github.com/vuejs/vue/commit/e1abedb9e66b21da8a7e93e175b9dabe334dfebd

Lihat laporan bug lainnya di https://github.com/vuejs/vue/issues/9208#issuecomment -477811927

Solusi saat ini:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(args => {
            args.compilerOptions.whitespace = 'preserve'
          })
  }
}
picture sodatea pada 6 Sep 2019
👍11 🎉1

Semua 6 komentar

Saya telah mentransfer masalah ini ke repositori vue karena saya yakin ini adalah bug yang diperkenalkan di https://github.com/vuejs/vue/commit/e1abedb9e66b21da8a7e93e175b9dabe334dfebd

Lihat laporan bug lainnya di https://github.com/vuejs/vue/issues/9208#issuecomment -477811927

Solusi saat ini:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
        .use('vue-loader')
          .tap(args => {
            args.compilerOptions.whitespace = 'preserve'
          })
  }
}
sodatea picture sodatea pada 6 Sep 2019
👍11 🎉1

Apakah mungkin untuk mengabaikan hairspaces (   ) juga ..?

_edit: maaf, tidak melihat masalah link_

naton picture naton pada 31 Mar 2020

@naton seperti yang disebutkan, ini harus didiskusikan di vue repo. Sodatea menghubungkan masalah ini

LinusBorg picture LinusBorg pada 31 Mar 2020

@ LinusBorg bukankah ini repo Vue? Masalah terkait adalah perubahan asli untuk menambahkan 'memadatkan' bukan? Itu juga ditutup.

Kami baru saja mengalami ini hari ini dan mencoba mencari cara untuk mengatasinya. Kami telah membangun beberapa otomatisasi lokalisasi yang mengasumsikan pengaturan 'menyingkat' (berdasarkan saran Evan bahwa ini akan menjadi default di 3.x dan karena saya setuju dengan perilaku menyingkat). Jadi, sulit untuk menukar kembali untuk mengawetkan tanpa potensi efek samping.

chrisnicola picture chrisnicola pada 9 Apr 2020

Ok tampaknya tidak termasuk nbsp; di dalam elemen dengan sendirinya memecahkan masalah. Menambahkan ini sebagai catatan untuk siapa pun yang mengalami ini.

chrisnicola picture chrisnicola pada 9 Apr 2020

Saya telah mentransfer masalah ini ke repositori vue karena saya yakin ini adalah bug yang diperkenalkan di e1abedb

Lihat laporan bug lain di # 9208 (komentar)

Solusi saat ini:

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

Ini sepertinya tidak bekerja lagi dengan Vue 3, ini melontarkan kesalahan: "TypeError: Cannot set property 'whitespace' of undefined". Ada solusi untuk Vue 3?

antoniandre picture antoniandre pada 29 Sep 2020
👍2 👀1
Apakah halaman ini membantu?
0 / 5 - 0 peringkat

Masalah terkait

asiFarran picture asiFarran  ·  34Komentar
alenyu picture alenyu  ·  43Komentar
RashadSaleh picture RashadSaleh  ·  51Komentar
cherry-geqi picture cherry-geqi  ·  35Komentar
cnweibo picture cnweibo  ·  41Komentar