如何使VUE和VITE与Web组件一起使用？

Question

我想将我的 vue 2 项目从webpack迁移到 vite 。 并且必须使用使用

这些组件在运行时（通过VUE）丢弃错误：

未知自定义元素：＆lt; foo-component＆gt; - 您注册了 组件正确？对于递归组件，请确保提供 “名称”选项。

还有（通过 lit-element ）

未能在“ Shadowroot”上设置“采用的列表”属性： 无法将值转换为“ CSSSTYLESHEET”。

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

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

因此，（使用WebPack设置）之前，我只是导入了它们，并且所有用来工作的东西。好吧，实际上对于WebPack lit-scss-loader 也用于这些组件。

我认为Vite可能需要一些其他配置，或者在这里需要类似于“ WebPack”加载程序的东西，但不确定我必须移动什么方向。

我在做什么错？

Answer 1

configure @vite/plugin/plugin-vue 点亮的元素，例如，以 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'),
        },
      },
    }),
  ],
})

demo

Answer 2

需要几个步骤。

想象一下，我有第三方网络操作人员名为“ Foo”。因此，所有这些都在 node_modules/@foo 中。

我需要执行以下步骤：

1. 告诉VITE，所有组件以“ foo-”开头是Web Components。

   iscustomelement ：（ tag）=＆gt; tag.startswith（'foo-'）

2. 添加“ “插件可帮助Vite为WebComponents准备CSS。

   
   

3. 告诉Vite如何处理WebComponents的CSS路径。

   '〜@foo'：fileurltopath（new url（'./ node_modules/@foo'，import.meta.url））

这是完整的配置：

//vite.config.ts

import postcssLit from 'rollup-plugin-postcss-lit';

export default defineConfig({
  plugins: [
    vue(
      {
        template: {
          compilerOptions: {
            // 1. Tell Vite that all components starting with "foo-" are webcomponents
            isCustomElement: (tag) => tag.startsWith('foo-')
          }
        }
      }
    ),
    vueJsx(),
    // 2. This "postcssLit" plugin helps prepare CSS for the webcomponents
    postcssLit()
  ],
  resolve: {
    alias: {
      // 3. Tell Vite how to treat CSS paths for webcomponents
      '~@foo': fileURLToPath(new URL('./node_modules/@foo', import.meta.url))
    }
  }
});