无法使用Vue3加载模具组件库

Question

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

我使用vue3初始化了一个npm init vue@latest项目，正如官方文档中所述。

然后我安装了规模，一个由模板构建的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);
});

和vite.config.js中相同的isCustomElement函数

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

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

当打开包含web组件的测试页(/test)时，我的web浏览器控制台中出现了一个错误：

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

和我公司的设计系统都是如此，我确信它可以与任何基于模板的组件库进行复制。

编辑

看来node_modules/.vite是Vite的依赖预绑定特性缓存事物的目录。。并且浏览器无法加载的脚本scale-button_14.entry.js在node_modules/.vite/deps中根本不存在。因此，这个问题可能与“依赖预捆绑”特性有关:不知怎么的，它不能检测到库加载器中的组件吗？

编辑2

我刚刚发现有模板存储库中的一个问题提到动态导入不适用于像Vite这样的现代构建工具。这个问题已经结束了7天前(幸运我！)，版本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预捆绑特性忽略这些导入。我在vite.config.js中配置了vite.config.js，但在运行npm run dev时仍然收到来自vite的大量警告。

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'
    ],
  },
  // ...
});

Answer 1

此问题已由模板在2.16版本中修复。

将组件库依赖项中的模板升级到2.16.1，并使用experimentalImportInjection标志重新构建它，解决了问题。

然后，我可以在正式文档之后导入它：

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配置中配置自定义元素：

vite.config.js

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

Answer 2

我没有配置main.ts

stencil.js版本是2.12.1，tsconfig.json在模具中添加新配置选项：

{
  "compilerOptions": {
    ...
    "skipLibCheck": true,
    ...
  }
}

在webpack.config.js：vue 3文件中添加新的配置选项

...
module: {
  rules:[
    ...
    {
      test: /\.vue$/,
      use: {
        loader: "vue-loader",
        options: {
          compilerOptions: {
            isCustomElement: tag => tag.includes("-")
          }
        }
      }
    }
    ...
  ]
}
...