我看到了同样的问题。 可能与运行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 ） .

Abdlrahmansaber 的临时修复作品，
（他的意思是“评论”而不是“普通”）你想注释掉他在截图中注释掉的行。

谢谢阿德里安梅德:)

可能我知道这个错误的原因

原因是因为如果您尝试导入 {ICON_PATH} 它不返回任何内容，请尝试在控制台中打印它它不会返回任何内容。

@Adrianmed @Abdlrahmansaber是的，它可以工作，但会

我已经应用了@Abdlrahmansaber 的解决方案。 但它不能正常工作（编译警告和控制台错误消失了）。
我正在尝试遵循： https :
但在我补充的那一刻

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"
},
“开发依赖”：{
"@vue/cli-service": "^3.8.0",
"vue-template-compiler": "^2.6.10"
}

我已经应用了@Abdlrahmansaber 的解决方案。 但它不能正常工作（编译警告和控制台错误消失了）。
我正在尝试遵循： https :
但在我补充的那一刻

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"
},
“开发依赖”：{
"@vue/cli-service": "^3.8.0",
"vue-template-compiler": "^2.6.10"
}

编辑：它对我来说很好用，即使你引用了导入

你应该使用我两天前建议的那个它可以工作，你会看到图标

@wannymiarelli我知道它杀死了图标，但是您可以在没有图标的情况下开发整个应用程序，直到修复错误

你是对的，这不是已发布的应用程序的解决方案

@mbilbao你能告诉我控制台吗？

我通过更改 package-lock.json 中的 ionicons 版本解决了这个问题

但实际上它应该适用于新的 npm install

@mbilbao你能告诉我控制台吗？

嘿，当您检查详细模式时，控制台很清楚，没有任何错误、警告或任何显示。
正如@daarioautumn发布的那样，我已经降级了 ionicons 包并且它可以工作。
无论如何，谢谢@Abdlrahmansaber 。

只需将[email protected]到您的 package.json 中。 这只会覆盖任何对等依赖项，可以用作解决方法。

同样的问题。。。怎么解决？

我已经应用了@Abdlrahmansaber 的解决方案。 但它不能正常工作（编译警告和控制台错误消失了）。
我正在尝试遵循： https :
但在我补充的那一刻

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"
},
“开发依赖”：{
"@vue/cli-service": "^3.8.0",
"vue-template-compiler": "^2.6.10"
}

@mbilbao我有同样的问题。 你找到修复了吗？

我有同样的问题。 我在互联网上看了几个小时以找到解决方案，但没有找到解决此问题的正确方法。 有人能帮我吗？

我已经应用了@Abdlrahmansaber 的解决方案。 但它不能正常工作（编译警告和控制台错误消失了）。
我正在尝试遵循： https :
但在我补充的那一刻

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"
},
“开发依赖”：{
"@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你的解决方法对我

你遇到过这个问题吗？ 你知道如何解决吗？

我刚刚使用 Angular 转向了普通的 Ionic。 但是我还是想用vue框架来开发我的项目sad

我已经应用了@Abdlrahmansaber 的解决方案。 但它不能正常工作（编译警告和控制台错误消失了）。
我正在尝试遵循： https :
但在我补充的那一刻

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"
},
“开发依赖”：{
"@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/ vue @ 。 所以我关闭了这个问题

可以将最新版本（@ionic/[email protected]）发布到 npm 吗？ 现在 npm 是 v0.0.4。

它发布在 npm do npm install --save @ionic/ vue@next

@jepiqueau的解决方案对我来说非常有效。 谢谢！！！

它在@ionic/ [email protected] 中工作正常，但仅适用于在 vue appInitialize 中添加的离子，即：
关闭、重新排序、菜单、向前箭头、向后箭头、向下箭头、搜索和关闭圆圈。

我们什么时候可以希望拥有对所有图标的完全访问权限？

当然可以编辑 ionic-vue.esm.js 但不确定这是推荐的方式....

拥有其他图标的解决方案是将它们添加到 main.js 文件中，即对于图标“star”、“trash”、“create”，您可以这样做

// 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
我在 Home.Vue 中添加了一个 TestIcons 按钮和一个显示所需图标的 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]

@hunterloftis - 谢谢。 做到了。 我希望它在我去生产之前得到正式更新，但它现在有效。

谢谢你们，你真的让我很容易

感谢您的问题！ 此问题已被锁定，以防止发表与原始问题无关的评论。 如果最新版本的 Ionic 仍然存在问题，请创建一个新问题并确保模板已完整填写。