如何让 Vue 和 Vite 与 Web 组件配合使用？

Question

我想将我的Vue 2项目从 webpack 迁移到Vite。并且必须使用使用lit-element构建的第三方 Web 组件。

这些组件在运行时抛出错误（通过 vue）：

未知的自定义元素：< foo-component > - 您是否正确注册了该组件？对于递归组件，请确保提供“名称”选项。

还有（通过lit-element）

无法设置“ShadowRoot”上的“adoptedStyleSheets”属性：无法将值转换为“CSSStyleSheet”。

据我所知，那些第三方 Web 组件仅在其索引文件（内部node_modules）中执行此操作：

import FooComponent from './FooComponent';
customElements.define('foo-component', FooComponent);

所以之前（使用 webpack 设置）我只是导入它们并且一切都可以工作。嗯，实际上 webpacklit-scss-loader也用于这些组件。

我认为 Vite 可能需要一些额外的配置，或者这里可能需要类似于“webpack”加载器的东西，但不确定我必须移动哪个方向。

我做错了什么？

Answer 1

配置@vite/plugin-vue为忽略 Lit 元素，例如以my-lit注册名称开头的元素：

// vite.config.js
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          // treat all components starting with `my-lit` as custom elements
          isCustomElement: tag => tag.startsWith('my-lit'),
        },
      },
    }),
  ],
})

演示