使用自定义标签时避免 Vue 警告答案

【问题标题】：Avoid Vue warn when using custom tags使用自定义标签时避免 Vue 警告
【发布时间】：2020-05-20 12:12:41
【问题描述】：

当我尝试使用这样的自定义标签时遇到错误：

<material-button>Ok</material-button>

它不是真正的组件，只是带有特定 CSS 的语义 HTML。但是，我收到了这个 Vuew 错误：

 [Vue warn]: Unknown custom element: <material-button> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

我可以不用创建<material-button> 并将其注册为组件就可以避免这个错误吗？

注意：一切正常，只是控制台中一直弹出[Vue警告]。

【问题讨论】：

标签： javascript html vue.js vuejs2 tags

【解决方案1】：

您可以在组件上使用v-pre 属性

<material-button v-pre> </material-button>

https://vuejs.org/v2/api/#v-pre

或者你可以使用ignoredElements

Vue.config.ignoredElements = [
    "material-button"
]

https://vuejs.org/v2/api/#ignoredElements

【讨论】：

真棒猫头鹰。最后，我的 HTML 使用自定义标签更有意义，我可以避免有这么多类的长划分。

【解决方案2】：

您不能按照Linus_Borg 对每个组件禁用警告

但是您可以使用Vue.config.silent 来禁止所有警告

【讨论】：

【解决方案3】：

您可以在此处查看解决方案： Vue warn Failed to resolve component: ion-icon

如果你想过去并通过，请更新vue.config.js 喜欢


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

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【解决方案4】：

我在我的 webpack 配置中解决了这个问题，通过将这些选项应用于 vue-loader：

  {
    test: /\.vue$/,
    loader: "vue-loader",
    options: {
      cacheBusting: false, // true by default (:
      compilerOptions: {
        isCustomElement:  (tag) => tag === "lottie-player",
      },
    },
  },

通过这样做，我在使用时不会收到任何警告

<lottie-player></lottie-player>

在我的组件中。

我的设置是：

"vue": "^3.2.31",
"vue-loader": "^16.2.0",
"webpack": "^5.53.0",

【讨论】：