Vue警告无法解析组件：ion-icon

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 和module.exports = {runtimeCompiler: true} 来抑制它。对ion-icon 警告没有影响。这可能与需要使用自定义 vue-loader 有关，但有没有一种简单的方法可以消除此警告？

Answer 1

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

isCustomElement 配置选项仅在使用运行时编译器时受到尊重。如果您使用的是仅运行时构建，则必须在构建设置中将 isCustomElement 传递给 @vue/compiler-dom - 例如，通过 vue-loader 中的 compilerOptions 选项：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
      })
  }
}