Vite+Vue3完整版（runtime compiler）无法使用Web Component问题求助

• app.config.isCustomElement配置仅作用于Vue runtime编译阶段，而Vite的@vitejs/plugin-vue会在构建阶段提前编译SFC的template模板，该阶段不会读取runtime的配置，因此会将my-component识别为未知Vue组件抛出警告。
• Web Component的注册逻辑写在App.vue的script中，执行时机晚于模板解析，也会导致组件无法正常识别。

步骤1：修改vite.config.js，添加构建期自定义元素识别配置 #

给@vitejs/plugin-vue添加template.compilerOptions.isCustomElement配置，让构建阶段的编译器直接识别自定义元素：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue({
    template: {
      compilerOptions: {
        isCustomElement: tag => tag === 'my-component'
      }
    }
  })],
  resolve: {
    alias: {
        'vue': 'vue/dist/vue.esm-bundler.js'
    }
  }
})

修改完成后需要重启Vite开发服务生效。

步骤2：调整Web Component注册时机 #

将Web Component的注册逻辑移到main.js中，放在应用挂载之前执行，保证模板解析前自定义元素已经注册完成：

import { createApp } from 'vue'
import App from './App.vue'

// 提前注册Web Component
class MyComponent extends HTMLElement {
    constructor() {
        super();
        const container = document.createElement('div');
        container.classList.add('container');
        const name = document.createElement('p');
        name.classList.add('name');
        name.innerText = 'Custom component';
        container.append(name);
        this.append(container);
    }
}
window.customElements.define('my-component', MyComponent);

const app = createApp(App);
// 仅使用SFC模板时该配置可省略，如有runtime动态渲染场景可保留
app.config.isCustomElement = tag => tag === "my-component";

app.mount('#app')

步骤3：简化App.vue代码 #

移除App.vue中Web Component的注册逻辑，自定义元素建议使用完整闭合标签，避免解析异常：

<template>
    My custom component can display normally:
    <my-component></my-component>
</template>

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