Onsen UI v-ons-icon 不工作

Posted 2023-02-23

【中文标题】Onsen UI v-ons-icon 不工作

【英文标题】：Onsen UI v-ons-icon not working

【发布时间】：2018-12-09 07:37:45

【问题描述】：

我只是使用 npm 为 vue-cli 安装新的 pwa onsen UI 项目。所有组件正常工作，只有图标组件在运行应用程序时不显示图标。 甚至，我从 v-ons-components 文件 v-ons-icon 中取消注释 还是不行

【参考方案1】：

我也没有看到 v-ons-icon 组件，尽管其他所有内容都显示了。当从构建的 index.html 文件打开应用程序或在 android 模拟器中运行应用程序时，图标确实在 npm run dev 中显示，但在 npm run build 之后不显示。

我得到了像GET file:///Users/[username]/[appname]/www/dist/static/css/static/fonts/fa-solid-900.132e975.ttfnet::ERR_FILE_NOT_FOUND`这样的错误，它正在寻找的文件将在它正在寻找的地方，只是没有“css”文件夹。

例如，构建将指向字体文件的 www/dist/static/css/static/fonts/ 文件夹，尽管它已将这些文件放在 www/dist/static/fonts 文件夹中。 ...它假设一个“css”文件夹存在，但不存在。构建过程以某种方式提取字体引用到一个额外的“css”文件夹中。

由于字体在 dev 而不是 build 中工作，我将 webpack.dev.conf.js 与 webpack.prod.conf.js 进行了比较。

webpack.prod.conf.js 文件包含extract: true 内部的rules: utils.styleLoaders。这个“提取”设置不包含在webpack.dev.conf.js 文件中，所以我从webpack.prod.conf.js 中删除了extract: true ...然后，当我再次运行npm run build 时，v-ons-icon 组件出现了！