Vue 2转Vue 3：Web Component迁移及替代方案咨询

一、使用 Vue 3 直接创建 Web Component #

Vue 3 已原生内置自定义元素支持，无需依赖第三方库就能构建 Web Component，步骤如下：

1. 定义 Vue 组件
   可使用单文件组件（.vue）或纯 JS/TS 定义组件，示例：

   <!-- my-wc.vue -->
   <template>
     <div class="wrapper">
       <h2>{{ title }}</h2>
       <p>{{ content }}</p>
     </div>
   </template>
   
   <script>
   export default {
     props: ['title', 'content']
   }
   </script>
   

2. 转换为自定义元素
   使用 Vue 提供的 defineCustomElement 方法将组件转换为自定义元素：

   import { defineCustomElement } from 'vue'
   import MyWc from './my-wc.vue'
   
   // 生成自定义元素构造器
   const MyWcElement = defineCustomElement(MyWc)
   
   // 注册到浏览器自定义元素注册表
   customElements.define('my-wc', MyWcElement)
   

3. 在页面中使用
   直接在 HTML 中引入并使用：

   <my-wc title="Hello Vue 3 WC" content="这是用 Vue 3 构建的 Web Component"></my-wc>
   

二、替代 @vue/web-component-wrapper 的工具 #

最推荐的替代方案是 Vue 3 原生的 defineCustomElement API，它是官方专为 Web Component 设计的能力，完全覆盖旧库的功能。

针对批量注册、多组件打包等复杂场景，还可以搭配：

• Vite 原生支持：Vite 可直接将 Vue 组件打包为 Web Component，无需额外配置
• @vitejs/plugin-vue：配合 Vite 使用，自动处理单文件组件到自定义元素的转换

三、vue-cli-service --target wc 不再支持的解决方案 #

Vue CLI 对 Vue 3 的 Web Component 构建支持有限，推荐切换到 Vite 作为构建工具，步骤如下：

1. 初始化 Vite 项目

   npm create vite@latest my-wc-project -- --template vue
   cd my-wc-project
   npm install
   

2. 配置 Vite 打包为 Web Component
   修改 vite.config.js，添加自定义元素打包规则：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   export default defineConfig({
     plugins: [
       vue({
         customElement: true // 启用自定义元素模式
       })
     ],
     build: {
       lib: {
         entry: './src/my-wc.vue', // 你的组件入口文件
         formats: ['es']
       },
       rollupOptions: {
         external: ['vue'],
         output: {
           globals: {
             vue: 'Vue'
           }
         }
       }
     }
   })
   

3. 执行打包
   运行打包命令生成可直接使用的 Web Component 文件：

   npm run build
   

   打包后通过 <script type="module"> 引入到 HTML 中即可使用。

若坚持使用 Vue CLI，可手动配置 Webpack 处理自定义元素，但步骤繁琐，效率远低于 Vite。

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