Vue3-isCustomElement似乎不起作用，vue路由器与自定义元素发生冲突

Question

我有一个带有vue路由器的VUE3应用程序，使用作为自定义元素导入的第三方web组件，我将isCustomElement选项设置为忽略自定义元素，但似乎没有将其考虑在内。

• 我在package.json中设置了"vue": { "runtimeCompiler": true }
• 我将app.config.isCustomElement = (tag) => tag.startsWith('bdl-')设置为忽略main.js中的customElements
• 我使用web组件-在About.vue中以bdl-开头的自定义元素：

<template>
<div class="about">
<h1>This is an about page</h1>
<bdl-fmi></bdl-fmi>
<bdl-range></bdl-range>
<bdl-chartjs-time></bdl-chartjs-time>
</div>
</template>

然而，它似乎没有被考虑在内，浏览器控制台日志包含警告[Vue warn]: Failed to resolve component: bdl-fmi，自定义元素无法在路由器视图中呈现。

尝试过的VUE2和配置Vue.config.ignoredElements = ['bdl-chartjs']正在工作，类似的应用程序和vue路由器不尝试按预期解释第三方自定义元素和渲染。

如对isCustomElement有任何想法，我们将不胜感激。

有关此问题的示例，请访问CODESANDBOX：https://codesandbox.io/s/vue-3-router-with-bodylightjs-components-h8v50

Answer 1

app.config.isCustomElement标志适用于使用运行时编译器的项目，该编译器可以在Vue CLI项目中通过vue.config.js:中的runtimeCompiler标志启用

// vue.config.js
module.exports = {
runtimeCompiler: true,
}

但是，您也可以在没有运行时编译器的情况下通过删除app.config.isCustomElement并直接配置vue-loader来解决此问题：

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

Answer 2

我遇到了这个问题，因为没有正确调用元素加图标组件。我必须在我的main.js中导入ElementPlusIconsVue，并像下面这样全局注册它：

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
// then I can call the icon in my vue file directly
<Refresh
style="width:30px;cursor: pointer;float: right;"
@click="get_bili"
/>