Vue: باستخدام "المسافة البيضاء:" التكثيف "" ، تحتوي العناصر فقط ويتم تكثيف المسافات في علامات فارغة

تم إنشاؤها على ٦ سبتمبر ٢٠١٩ · 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

ما هو متوقع؟

يحتوي القالب على مدى يحتوي على حرف   . هذا الامتداد له خلفية حمراء. وبالتالي يجب أن ترى مربعًا أحمر صغيرًا على الصفحة.

ما الذي يحدث بالفعل؟

يتم تجاهل   في القالب وتحويله إلى مساحة عادية ، مما يعني عدم عرض عنصر الامتداد.

لا يمكنني تكرار هذا الخطأ في 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 في ٦ سبتمبر ٢٠١٩

👍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 في ٦ سبتمبر ٢٠١٩

👍11 🎉1

هل من الممكن تجاهل مسطحات الشعر ( &hairsp; ) كذلك ..؟

_تعديل: آسف ، لم أر رابط المشكلة_

naton في ٣١ مارس ٢٠٢٠

naton كما ذكرنا ، يجب مناقشة ذلك في vue repo. ربطت Sodatea القضية

LinusBorg في ٣١ مارس ٢٠٢٠

LinusBorg أليس هذا هو الريبو Vue؟ المشكلة المرتبطة هي التغيير الأصلي لإضافة "تكثيف" أليس كذلك؟ إنه مغلق أيضًا.

لقد واجهنا هذا اليوم للتو ونحاول معرفة كيفية التغلب عليه. لقد أنشأنا بعض أتمتة التعريب التي تفترض إعداد "التكثيف" (بناءً على اقتراح إيفان بأن هذا سيكون افتراضيًا في 3.x ولأنني أتفق مع سلوك التكثيف). لذلك يجعل من الصعب التبديل مرة أخرى للحفاظ عليها دون آثار جانبية محتملة.

chrisnicola في ٩ أبريل ٢٠٢٠

طيب يبدو أنه ببساطة لا يشمل nbsp؛ داخل عنصر بحد ذاته يحل المشكلة. إضافة هذا كملاحظة لأي شخص آخر يواجه هذا.

chrisnicola في ٩ أبريل ٢٠٢٠

لقد قمت بنقل هذه المشكلة إلى مستودع 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: لا يمكن تعيين الخاصية 'whitespace' من undefined". أي حل بديل لـ Vue 3؟