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

Answer 1

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

isCustomElement仅当使用运行时编译器时才会考虑配置选项。如果您使用仅运行时构建，isCustomElement则必须在构建设置中传递 -@vue/compiler-dom例如，通过compilerOptionsvue-loader 中的选项：https://vue-loader.vuejs.org/options.html#compileroptions。

您可以修改vue-loader配置compilerOptionsvue.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
      })
  }
}