无法使用 Vite 使用 Vue 3 加载模板组件库

我创建了一个示例项目来重现此问题：https://github.com/splanard/vue3-vite-web-components https://github.com/splanard/vue3-vite-web-components

我使用初始化了一个 vue3 项目npm init vue@latest，按照官方文档中的建议。

然后我安装了Scale https://telekom.github.io/scale/?path=/docs/scale-design-system--page，一个模板构建的 Web 组件库。 （我的公司的内部设计系统也有完全相同的问题，因此我搜索了公共模板构建库来重现该问题。)

我在中配置了以下内容main.ts:

import '@telekom/scale-components-neutral/dist/scale-components/scale-components.css';
import { applyPolyfills, defineCustomElements } from '@telekom/scale-components-neutral/loader';

const app = createApp(App);
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('scale-')

applyPolyfills().then(() => {
  defineCustomElements(window);
});

和相同的isCustomElement函数于vite.config.js:

export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        isCustomElement: (tag) => tag.startsWith('scale-')
      }
    }
  })]
  // ...
})

我在我的视图中插入了一个简单的按钮（TestView.vue），然后运行npm run dev.

打开我的测试页面时（/test）包含 Web 组件，我的 Web 浏览器控制台中出现错误：

failed to load module "http://localhost:3000/node_modules/.vite/deps/scale-button_14.entry.js?import" because of disallowed MIME type " "

由于 Scale 和我公司的设计系统都是这种情况，我非常确定它可以用任何基于模板的组件库重现。

Edit

看起来node_modules/.vite is Vite 依赖预捆绑功能缓存内容的目录 https://vitejs.dev/guide/dep-pre-bundling.html#file-system-cache。还有剧本scale-button_14.entry.js浏览器无法加载根本不存在node_modules/.vite/deps。因此，问题可能与此“依赖项预捆绑”功能有关：不知何故，它无法检测到库加载器中的组件吗？

Edit 2

我刚刚发现有Stencil 存储库中的问题 https://github.com/ionic-team/stencil/issues/2827提到动态导入不适用于 Vite 等现代构建工具。这个问题已于 7 天前关闭（我很幸运！），Stencil 2.16.0 版本应该可以解决这个问题。我们将会看到。

目前，放弃延迟加载并通过普通旧的方式一次性加载所有组件scriptHTML 模板中的标签似乎是可接受的解决方法.

<link rel="stylesheet" href="node_modules/@telekom/scale-components/dist/scale-components/scale-components.css">
<script type="module" src="node_modules/@telekom/scale-components/dist/scale-components/scale-components.esm.js"></script>

但是，我无法使用 vite 预捆绑功能来忽略这些导入。我配置了optimizeDeps.exclude in vite.config.js但当我跑步时，我仍然收到来自 vite 的大量警告npm run dev:

export default defineConfig({
  optimizeDeps: {
    exclude: [
      // I tried pretty much everything here: no way to force vite pre-bundling to ignore it...
      'scale-components-neutral'
      '@telekom/scale-components-neutral'
      '@telekom/scale-components-neutral/**/*'
      '@telekom/scale-components-neutral/**/*.js'
      'node_modules/@telekom/scale-components-neutral/**/*.js'
    ],
  },
  // ...
});

Stencil 在 2.16 版本中已修复此问题。

将组件库依赖项中的 Stencil 升级到 2.16.1 并使用experimentalImportInjection https://stenciljs.com/docs/config-extras#experimentalimportinjection flag 解决了问题.

然后，我可以按照官方文档导入它：

main.ts

import '@telekom/scale-components-neutral/dist/scale-components/scale-components.css';
import { applyPolyfills, defineCustomElements } from '@telekom/scale-components-neutral/loader';

const app = createApp(App);

applyPolyfills().then(() => {
  defineCustomElements(window);
});

并在 vite config 中配置自定义元素：

vite.config.js

export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        isCustomElement: (tag) => tag.startsWith('scale-')
      }
    }
  })]
  // ...
})