Vue 忽略自定义组件标签

Question

在我的网站上，我使用 Google CSE（google 的自定义搜索引擎）。

这是我的 HTML:

<div id="app">
  ...
  <gcse:search></gcse:search>
  ...
</div>
<script type="text/javascript">
    new Vue({ el: '#app' })
</script>

如您所见，我在我的 vue 应用程序中放置了一个 "gcse input"。

因此我收到警告：

[Vue warn]: Unknown custom element: <gcse:search>

所以我的问题是如何停止尝试在 Vue.js 中初始化此自定义组件？

提前致谢。

Answer 1

Vue 认为您正在尝试加载名为 gcse:search 的 Vue 组件。

为了忽略这个标签，添加 v-pre directive:

<gcse:search v-pre></gcse:search>

---

或者，您可以将 gcse:search 标记添加到 Vue 的 ignoredElements 列表中：

Vue.config.ignoredElements = ['gcse:search']

Answer 2

除了 thanksd 的答案之外，您可以通过在 ignoredElements 属性 中添加这些标签来忽略未知标签：

Vue.config.ignoredElements = ['gcse:search']

您也可以使用正则表达式而不是字符串来忽略这些标签：

Vue.config.ignoredElements = [/gcse:*/]

如果您想忽略更多具有特定模式的 tags/components，这将非常有用。在这种情况下，您可以忽略所有以 "gcse"

开头的标签

Answer 3

在 Vue 3 中是不同的。

有两种配置方式。

1。如果您使用 runtime compiler

请注意，如果您使用 runtime-only build

，这将不起作用

const app = createApp({})
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('ion-')

2。使用 runtime-only build

此处您必须在 webpack.config.js 中为 vue-loader

添加一条规则

rules: [
  {
    test: /\.vue$/,
    use: 'vue-loader',
    options: {
      compilerOptions: {
        isCustomElement: tag => tag.startsWith('ion-')
      }
    }
  }
  // ...
]

额外

如果你使用的是laravel-mix，前面的方法对你不起作用，正确的方法是在laravel-mix

的vue函数中传递options

mix.js('resources/js/app.js', 'public/js')
 .vue({
 options: {
  compilerOptions: {
   isCustomElement: tag => tag.startsWith('ion-')
  }
 }
})

参考文献：

1. https://v3.vuejs.org/guide/migration/global-api.html#config-ignoredelements-is-now-config-compileroptions-iscustomelement
2. https://v3.vuejs.org/guide/migration/custom-elements-interop.html#_2-x-syntax
3. https://vue-loader.vuejs.org/guide/#manual-setup