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

标签 javascript vue-component web-component vuejs3 vite

我正在尝试让一个 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


日志返回 true,所以我不确定问题到底出在哪里。

最佳答案

问题是vite版本。将其推送到 vite2 可以解决此问题。"vite": "^2.0.5"

关于javascript - vue3 isCustomElement 正在将组件检测为 vue 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66385028/

相关文章:

javascript - 如何格式化 Vue.js 中的当前日期格式

javascript - 使用动态扩展类表达式创建新元素

javascript - 在一个函数中返回两个变量

javascript - 如何使用 anchor 标记中具有javascript的Htmlunit从网页下载文件

javascript - 使用 vuejs 选中/取消选中子组件中的复选框

javascript - Vue 3 为每个 child 添加包装器

javascript - 管理 Web 组件的依赖关系; JS、CSS/SASS 和模板文件

typescript - 如何修复 `Class constructor LitElement cannot be invoked without ' new'`?

javascript - 在 javascript 中打印提示变量返回 "NaN"

javascript - 从 Firefox 获取 HWND