vue3 isCustomElement 正在将组件检测为 vue 组件

Question

我正在尝试让一个 webcomponent 与 vitejs 一起工作。

我正在尝试使用的组件： https://www.webcomponents.org/element/input-knob

我按照文档中的描述做了。

安装和设置 @vitejs/plugin-vue

https://github.com/vitejs/vite/tree/main/packages/plugin-vue#vitejsplugin-vue-

在配置中启动自定义元素。（我也试过简单地将自定义元素放在 main.js https://github.com/vitejs/vite/issues/1312

vite.config.js


import { VitePWA } from 'vite-plugin-pwa'
import vue from '@vitejs/plugin-vue'
export default {
  plugins: [
    VitePWA(),
    vue({
      template: {
        compilerOptions: {
          isCustomElement: tag => tag === 'input-knob'
        }
      }
    })
  ]
}

仍然收到相同的警告:皱眉:

app.config.isCustomElement = tag => tag.startsWith('input-')

console.log(app.config.isCustomElement('input-knob'))

main.js


import { createApp } from 'vue'
import App from './App.vue'
import './index.css'

const app = createApp(App);

app.config.isCustomElement = tag => tag.startsWith('input-')

console.log(app.config.isCustomElement('input-knob'))
app.mount('#app')

[Vue warn]: Failed to resolve component: input-knob

日志 returns 是的，所以我不确定问题到底出在哪里。

Answer 1

vite 版本有问题。将其推送到 vite2 可以解决此问题。

"vite": "^2.0.5"

vue3 isCustomElement 正在将组件检测为 vue 组件

vue3 isCustomElement is detecting component as a vue component

javascript

web-component

vue-component

vuejs3

vite