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

Posted 2023-02-22

【中文标题】vue3 isCustomElement 正在将组件检测为 vue 组件

【英文标题】：vue3 isCustomElement is detecting component as a vue component

【发布时间】：2021-05-28 18:54:11

【问题描述】：

我正在尝试让一个 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，所以我不确定问题到底出在哪里。

【问题讨论】：

webcomponents 也有一些问题，但使用 webpack。你用的是哪个vue版本？您是否还记录了 vite 部分？ compilerOptions: isCustomElement: tag => tag === 'input-knob'

最新版本。 （我没有添加 vite 配置）js "dependencies": "@vitejs/plugin-vue": "^1.1.4", "@vueuse/core": "^4.2.2", "vue": "^3.0.4" , "devDependencies": "@vue/compiler-sfc": "^3.0.4", "vite": "^1.0.0-rc.13", "vite-plugin-pwa": "^0.5.4"

如何登录 vite？

【参考方案1】：

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

"vite": "^2.0.5"