我正在尝试让一个 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 警告]：无法解析组件：输入旋钮
日志返回 true，所以我不确定问题到底出在哪里。