أرى نفس المشكلة. من المحتمل أن يكون مرتبطًا بالتحذير الذي يظهر عند تشغيل ionic serve :

warning  in ./node_modules/@ionic/vue/dist/ionic-vue.esm.js
"export 'ICON_PATHS' was not found in 'ionicons/icons'

كذلك هنا. لا يمكن تقديم التطبيق الذي تم إنشاؤه حديثًا.

العمل الذي وجدته هو التثبيت أولاً

npm install @ionic/core<strong i="6">@one</strong> 
npm install @ionic/[email protected]

تعديل ملف main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
//import Ionic from "@ionic/vue"; // comment this line 
import { defineCustomElements as ionic } from "@ionic/core/loader"; // add a direct link to @ionic/core
import { defineCustomElements as svgmorphing } from "stencil-svgpaths-morphing/dist/loader";

import "@ionic/core/css/ionic.bundle.css";

//Vue.config.ignoredElements = [/jeep-\w*/]; // comment this line
Vue.config.ignoredElements = [/^ion-/, /^jeep-/];   // add this line

//Vue.use(Ionic);  // comment this line
ionic(window); // add this line
svgmorphing(window);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

واحتفظ بالملف router.js لأنه لا يزال يستخدم IonicVueRouter

وهو يعمل بشكل جيد.
الآن إذا نظرت إلى package-lock.json ،

@ionic/core is version "4.6.0-dev.201906131724.645b9a9" requiring "ionicons": "4.5.9-1"
@ionic/vue is version 0.0.4 with dependencies @ionic/[email protected] requiring "ionicons": "4.5.10-2

في الواقع لرؤية الرموز ، يجب أن يكون main.js:

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { defineCustomElements as ionic } from "@ionic/core/loader"; // added line
import { defineCustomElements as svgmorphing } from "stencil-svgpaths-morphing/dist/loader";

//import Ionic from "@ionic/vue"; // commented line
import { addIcons } from "ionicons"; // added line
import { ICON_PATHS } from "ionicons/icons"; // added line
import "@ionic/core/css/ionic.bundle.css";

//Vue.config.ignoredElements = [/jeep-\w*/];  // commented line
Vue.config.ignoredElements = [/^ion-/, /^jeep-/]; // added line

//Vue.use(Ionic); // commented line
ionic(window); // added line
svgmorphing(window);
addIcons(ICON_PATHS); // added line
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

الآن يتم عرض الرموز
يمكن استخدام هذا كحل بديل حتى يتم تحديث @ ionic / vue إلى @ ionic / core @ one

انظر للتنفيذ الكامل

https://github.com/jepiqueau/vue-test-stencil-svgpaths-morphing/tree/ionicone

أواجه نفس المشكلة. لا يمكن تقديم التطبيق الذي تم إنشاؤه حديثًا.

كذلك هنا

مؤقتا،

• أي شيء شائع متعلق بالأيقونات في هذا الملف (ionic-vue.esm.js ، ملف مقطع يظهر في وحدة التحكم)

لقد فعلت ذلك ، وعمل التطبيق معي ولكن هذا ليس هو الحل الصحيح ، ولكن يمكنك القيام بذلك الآن لتستمر في عملك

إذا لم تتمكن من العثور على هذا الملف ، فانتقل إلى دليل المشروع ومن البحث على الكمبيوتر / في اللفة مباشرة الاسم الأول للملف. (إذا كنت تبحث عن ionic-vue.esm.js write -> ionic وستظهر جميع الملفات / المجلدات التي بدأت بـ ionic ، فاختر الملف الذي تبحث عنه في هذه الحالة (يجب عليك اختيار ionic-vue.esm.js) .

أعمال عبد الرحمن صابر للتركيب المؤقت ،
(يعني "تعليق" وليس "عام") تريد التعليق على الأسطر التي علق بها في لقطات الشاشة الخاصة به.

شكرا Adrianmed :)

ربما أعرف سبب هذا الخطأ

السبب لأنه إذا كنت تحاول استيراد {ICON_PATH} فلن يعيد شيئًا ، فحاول طباعته في وحدة التحكم ، فلن يُرجع أي شيء.

AdrianmedAbdlrahmansaber نعم يعمل ولكن قتل الرموز وهذا ليس حلا مؤقتا لتطبيق صدر :)

لقد قمت بتطبيق حلAbdlrahmansaber. لكنها لا تعمل بشكل صحيح (اختفى تحذير الترجمة وخطأ وحدة التحكم).
أحاول متابعة ذلك: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
لكن في هذه اللحظة أضيف

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

إلى main.js كل ما أحصل عليه هو صفحة "فارغة".

إصدارات التبعيات الحالية:
"التبعيات": {
"@ ionic / vue": "0.0.4"،
"vue": "^ 2.6.10"،
"vue-router": "^ 3.0.3"
} ،
"devDependencies": {
"@ vue / cli-service": "^ 3.8.0"،
"vue-template-compiler": "^ 2.6.10"
}

لقد قمت بتطبيق حلAbdlrahmansaber. لكنها لا تعمل بشكل صحيح (اختفى تحذير الترجمة وخطأ وحدة التحكم).
أحاول متابعة ذلك: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
لكن في هذه اللحظة أضيف

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

إلى main.js كل ما أحصل عليه هو صفحة "فارغة".

إصدارات التبعيات الحالية:
"التبعيات": {
"@ ionic / vue": "0.0.4"،
"vue": "^ 2.6.10"،
"vue-router": "^ 3.0.3"
} ،
"devDependencies": {
"@ vue / cli-service": "^ 3.8.0"،
"vue-template-compiler": "^ 2.6.10"
}

تحرير: إنه يعمل بشكل جيد بالنسبة لي ، حتى مع الاستيراد المقتبس

يجب عليك استخدام الشخص الذي اقترحته قبل يومين فهو يعمل وسترى الرموز

wannymiarelli أعلم أنه قتل الرمز ولكن يمكنك تطوير التطبيق بالكامل بدون رمز حتى يتم إصلاح الخطأ

وأنت محق في أنه ليس الحل للتطبيق الذي تم إصداره

mbilbao هل يمكنك أن تريني وحدة التحكم؟

لقد تم حل هذه المشكلة عن طريق تغيير إصدار ionicons في package-lock.json

ولكن يجب أن يعمل مع تثبيت npm جديد في الواقع

mbilbao هل يمكنك أن تريني وحدة التحكم؟

مرحبًا ، كانت وحدة التحكم واضحة ، بدون أي أخطاء أو تحذيرات أو أي شيء يظهر عند التحقق من الوضع المطول.
لقد قمت بالفعل بخفض مستوى حزمة ionicons كما نشر
شكرا Abdlrahmansaber على أي حال.

فقط أضف [email protected] إلى package.json الخاص بك. هذا يتجاوز فقط أي تبعية للأقران ويمكن استخدامه كحل بديل.

نفس المشكلة ... كيف تصلحها؟

لقد قمت بتطبيق حلAbdlrahmansaber. لكنها لا تعمل بشكل صحيح (اختفى تحذير الترجمة وخطأ وحدة التحكم).
أحاول متابعة ذلك: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
لكن في هذه اللحظة أضيف

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

إلى main.js كل ما أحصل عليه هو صفحة "فارغة".

إصدارات التبعيات الحالية:
"التبعيات": {
"@ ionic / vue": "0.0.4"،
"vue": "^ 2.6.10"،
"vue-router": "^ 3.0.3"
} ،
"devDependencies": {
"@ vue / cli-service": "^ 3.8.0"،
"vue-template-compiler": "^ 2.6.10"
}

mbilbao لدي نفس المشكلة. لم تجد حلا؟

لدي نفس المشكلة. لقد بحثت على الإنترنت لساعتين للعثور على حل لكنني لم أجد طريقة مناسبة لحل هذه المشكلة. هل يستطيع احد مساعدتي؟

لقد قمت بتطبيق حلAbdlrahmansaber. لكنها لا تعمل بشكل صحيح (اختفى تحذير الترجمة وخطأ وحدة التحكم).
أحاول متابعة ذلك: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
لكن في هذه اللحظة أضيف

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

إلى main.js كل ما أحصل عليه هو صفحة "فارغة".

إصدارات التبعيات الحالية:
"التبعيات": {
"@ ionic / vue": "0.0.4"،
"vue": "^ 2.6.10"،
"vue-router": "^ 3.0.3"
} ،
"devDependencies": {
"@ vue / cli-service": "^ 3.8.0"،
"vue-template-compiler": "^ 2.6.10"
}

mbilbao لدي نفس المشكلة. لم تجد حلا؟

نعم ، لقد قمت بتطبيق حل daarioautumn ، فقط قم بخفض إصدار حزمة ionicons إلى 4.5.8

@ yasin-mesut حل يناسبني

فقط قم بتثبيت الحزمة الأيونية: npm install [email protected] --save-dev كما اقترح @ yasin-mesut

jepiqueau لقد نجح الحل البديل بالنسبة لي ولكن الآن لدي محتوى مضاف إلى نهاية كل عنصر أيوني في تطبيقي:

هل واجهت هذه المشكلة؟ هل تعرف كيفية حل ذلك؟

لقد انتقلت للتو إلى الوضع العادي Ionic with Angular. لكن ما زلت أرغب في تطوير مشروعي باستخدام إطار عمل vue حزين

لقد قمت بتطبيق حلAbdlrahmansaber. لكنها لا تعمل بشكل صحيح (اختفى تحذير الترجمة وخطأ وحدة التحكم).
أحاول متابعة ذلك: https://ionicframework.com/blog/announcing-the-ionic-vue-beta/
لكن في هذه اللحظة أضيف

import Ionic from '@ionic/vue';
import '@ionic/core/css/ionic.bundle.css';

Vue.use(Ionic);

إلى main.js كل ما أحصل عليه هو صفحة "فارغة".

إصدارات التبعيات الحالية:
"التبعيات": {
"@ ionic / vue": "0.0.4"،
"vue": "^ 2.6.10"،
"vue-router": "^ 3.0.3"
} ،
"devDependencies": {
"@ vue / cli-service": "^ 3.8.0"،
"vue-template-compiler": "^ 2.6.10"
}

mbilbao لدي نفس المشكلة. لم تجد حلا؟

نعم ، لقد قمت بتطبيق حل daarioautumn ، فقط قم بخفض إصدار حزمة ionicons إلى 4.5.8

لقد وجدت هذا النمط:

html:not(.hydrated) body {
    display: none;
}

يتم حل هذا باستخدام @ ionic / [email protected]. لذلك أغلقت القضية

هل يمكن نشر أحدث إصدار (@ ionic / vue @ 0.0.9) إلى npm؟ الآن في npm هو v0.0.4.

يتم نشره على npm do npm install --save @ ionic / vue @ next

نجح حل

إنه يعمل بشكل جيد في @ ionic / [email protected] ولكن فقط مع الأيونات المضافة في vue appInitialize ، على سبيل المثال:
إغلاق ، إعادة ترتيب ، قائمة ، سهم للأمام ، سهم للخلف ، سهم لأسفل ، بحث ودائرة قريبة.

متى يمكننا أن نأمل في الوصول الكامل إلى جميع الرموز؟

بالطبع يمكن تعديل أيونيك vue.esm.js لكن لست متأكدًا من أن هذه هي الطريقة الموصى بها ....

الحل لوجود رموز أخرى هو إضافتها في ملف main.js ، أي للأيقونات "نجمة" و "سلة المهملات" و "إنشاء" تفعل هذا

// after import Ionic from "@ionic/vue"; 

import { addIcons } from "ionicons";
import { star, trash, create } from "ionicons/icons";

// after Vue.use(Ionic);
addIcons({
  "ios-star": star.ios,
  "md-star": star.md,
  "ios-trash": trash.ios,
  "md-trash": trash.md,
  "ios-create": create.ios,
  "md-create": create.md
});

هذا كل شيء ويعمل ، لذا افعل ذلك مع أي رموز تريد استخدامها حتى مع الرمز الذي تريد إضافته في عنصر أيوني
أتمنى أن تساعد

ألق نظرة على الفرع ionicone من
https://github.com/jepiqueau/vue-test-stencil-svgpaths-morphing
أقوم بإضافة زر TestIcons في Home.Vue و TestIcons.Vue يظهر الرموز المطلوبة

أنه يعمل بشكل جيد. شكرا للمساعدة. هل هو إصلاح مؤقت أم هو السبيل إلى الأمام للوصول إلى الرموز؟

لا أعرف خطط فريق Ionic ولكن بالنسبة لي من المنطقي استيراد الرموز التي تحتاجها في تطبيقك فقط بدلاً من جميع الرموز التي ستزيد من حجم تطبيقك بدون قيمة

ملاحظة ، عند محاولة استيراد الرموز ذات الشرطات في الاسم ، على سبيل المثال log-out يمكنك استخدام logOut في الاستيراد بدلاً من ذلك.

import { addIcons } from "ionicons";
import { logOut } from "ionicons/icons";
addIcons({
  "ios-log-out": logOut.ios,
  "md-log-out": logOut.md
});

هذه هي الطريقة

هل تم حل هذا؟

بالنسبة للأشخاص الذين يواجهون هذا في المستقبل ، فإن الإصلاح مدفون إلى حد ما أعلاه. ما عليك سوى تحديث إصدارك من @ ionic / vue ، على سبيل المثال:

$ npm install @ionic/[email protected]

تضمين التغريدة هذا فعلها. آمل أن يتم تحديثه رسميًا قبل أن أذهب إلى المنتج ، لكنه يعمل في الوقت الحالي.

شكرًا يا رفاق ، لقد جعلتم الأمر سهلاً بالنسبة لي حقًا

شكرا على المشكلة! تم قفل هذه المشكلة لمنع التعليقات غير ذات الصلة بالمشكلة الأصلية. إذا استمرت المشكلة في أحدث إصدار من Ionic ، فيرجى إنشاء مشكلة جديدة والتأكد من ملء النموذج بالكامل.