Vue3+Vite环境无法加载Stencil构建的Web组件库问题求助

复现准备 #

• 创建了示例项目用于复现问题，仓库地址：https://github.com/splanard/vue3-vite-web-components
• 按照官方文档推荐方式，通过 npm init vue@latest 初始化Vue3项目
• 安装基于Stencil构建的Web组件库Scale（组件库文档地址：https://telekom.github.io/scale/?path=/docs/scale-design-system--page，公司内部设计系统存在完全相同问题，因此选用该公开Stencil组件库复现问题）

已完成配置 #

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);
});

vite.config.js 配置 #

在Vite配置中同步添加自定义元素识别规则：

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

报错现象 #

在视图文件 TestView.vue 中插入简单的Scale按钮组件，执行 npm run dev 启动项目。打开路由为 /test 的组件测试页面时，浏览器控制台抛出如下报错：

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

Scale组件库和公司内部设计系统均存在该问题，可确认该问题能在任意基于Stencil构建的组件库上复现。

初步排查结论 #

node_modules/.vite 是Vite依赖预构建功能的文件系统缓存目录，经检查，浏览器加载失败的 scale-button_14.entry.js 脚本根本不存在于 node_modules/.vite/deps 目录下。初步推测问题和Vite的「依赖预构建」特性有关：该机制可能存在限制，无法识别组件库loader动态加载的组件资源。

已知信息与临时方案 #

查询Stencil仓库相关issue（地址：https://github.com/ionic-team/stencil/issues/2827）发现，已有开发者反馈动态导入无法在Vite这类现代构建工具中正常工作。该issue已关闭，Stencil 2.16.0版本已修复该问题，可后续跟进验证。

当前可用的临时解决方案是放弃组件懒加载，直接在HTML模板中通过传统script标签一次性加载所有组件，代码如下：

<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.config.js 中配置 optimizeDeps.exclude 项，让Vite预构建功能忽略Stencil组件库相关导入，但执行 npm run dev 时Vite仍然输出大量相关警告，尝试的配置如下：

export default defineConfig({
  optimizeDeps: {
    exclude: [
      // 尝试了多种匹配规则，均无法让Vite预构建跳过该依赖
      'scale-components-neutral',
      '@telekom/scale-components-neutral',
      '@telekom/scale-components-neutral/**/*',
      '@telekom/scale-components-neutral/**/*.js',
      'node_modules/@telekom/scale-components-neutral/**/*.js'
    ],
  },
  // 其余配置省略
});

问题诉求 #

如何彻底解决该问题，怎样正确配置Vite才能让其跳过Stencil组件库的依赖预构建？

内容的提问来源于stack exchange，提问作者Eria