如何在Vue 3.x中像Vue 2一样为第三方网站创建并使用Web Component

一、正确的Web Component构建命令 #

Vue 3 下依然支持用--target wc构建Web Component，替换你之前的lib目标命令即可：

vue-cli-service build --target wc --name widget-v3 src/components/EntryComponent.vue

如果构建时报错，在vue.config.js中添加必要配置，确保Vue使用完整构建版本以支持Web Component编译：

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        'vue$': 'vue/dist/vue.esm-bundler.js'
      }
    }
  }
}

二、组件代码适配要点 #

为让Vue 3组件正确转为Web Component，需调整以下细节：

• 组件模板必须包含单个根节点（符合Web Component规范），原多根结构需外层包裹容器标签（如<div>）。
• Props声明适配Web Component属性规则：
  • HTML中用短横线命名的属性（如widget-title）对应Vue组件内的驼峰式props（如widgetTitle）。
  • 给需要通过HTML属性传递的props添加reflect: true，确保属性变化同步到DOM：

    props: {
      widgetTitle: {
        type: String,
        default: '',
        reflect: true
      },
      widgetCount: {
        type: Number,
        default: 0,
        reflect: true
      }
    }
    

• 避免在Web Component标签上使用Vue特有的指令（如v-model），改用原生事件监听和属性赋值。

三、第三方网站的使用方式 #

构建完成后生成widget-v3.umd.min.js等文件，第三方网站只需两步即可使用，和Vue 2时代完全一致：

1. 引入构建后的JS文件：

   <script src="./widget-v3.umd.min.js"></script>
   

2. 直接使用自定义标签：

   <widget-v3 widget-title="我的组件" widget-count="5"></widget-v3>
   

四、传参报错的排查与解决 #

若出现传参报错，从以下几点排查：

• 基础类型参数：数字、布尔类型在HTML中是字符串格式，组件内需确保类型处理正确，可通过计算属性转换：

  computed: {
    processedCount() {
      return Number(this.widgetCount);
    }
  }
  

• 复杂类型参数：对象、数组无法直接通过HTML属性传递，需通过JS赋值：

  const widget = document.querySelector('widget-v3');
  widget.widgetData = { name: 'test', items: [1,2,3] };
  

• 必填参数：确保所有必填props都设置了默认值，或第三方使用时已传入对应属性。

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