Vue 警告无法解析组件：离子图标

Question

按照 https://ionicons.com/usage 的用法，显示 ion-icon 但我收到此警告：

Failed to resolve component: ion-icon

我的步骤是：

我用 @vue/cli@4.5.11 创建了一个新应用程序 (vue create projectname)
将 <ion-icon name="heart"></ion-icon> 添加到 HelloWorld.vue
将 <script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script> 添加到 public/index。html

我试过 app.config.isCustomElement = tag => tag.startsWith('ion')，它创建了另一个警告，说该选项仅在使用运行时编译器时才受到尊重，但我能够通过添加 vue.config.js 和 [=19= 来抑制它].对 ion-icon 警告没有影响。这可能与需要使用自定义 vue-loader 有关，但是有没有简单的方法可以消除此警告？

Answer 1

使用 app.config.isCustomElement 的完整警告提供了有用的线索：

The isCustomElement config option is only respected when using the runtime compiler. If you are using the runtime-only build, isCustomElement must be passed to @vue/compiler-dom in the build setup instead- for example, via the compilerOptions option in vue-loader: https://vue-loader.vuejs.org/options.html#compileroptions.

您可以modify vue-loader's compilerOptions in vue.config.js配置isCustomElement:

// vue.config.js
module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...options.compilerOptions,
          isCustomElement: tag => tag.startsWith('ion-')
        }
        return options
      })
  }
}

Vue 警告无法解析组件：离子图标

Vue warn Failed to resolve component: ion-icon

vue.js

ionicons