刚好我之前也处理过类似的需求，把Vue项目里的多个组件分别打包成独立的Web Components，不用把整个测试应用打包进去，给你分享几个实用的方法：

方法一：单个组件单独打包（适合少量组件） #

如果你的组件数量不多，可以直接通过命令行单独打包每个组件，精准控制每个Web Component的标签名：

比如要打包src/components/Button.vue为标签名为custom-button的Web Component，运行：

npm run build -- --target wc --name custom-button ./src/components/Button.vue

• --target wc：告诉Vue CLI我们要打包为Web Component
• --name：指定Web Component的标签名（必须是kebab-case格式，符合Web Component规范）
• 最后跟上组件的路径

执行完命令后，你会在dist目录下看到生成的custom-button.js（如果组件有样式，还会有对应的css文件），这个文件就是完全独立的Web Component，直接引入到非Vue主应用里就能用。

方法二：批量打包多个组件（适合多组件场景） #

如果有一堆组件要打包，可以一次性指定所有组件路径，还能给它们统一加前缀：

npm run build -- --target wc --name app- ./src/components/*.vue

这里的--name app-是设置标签名前缀，Vue CLI会自动把组件文件名转为kebab-case并加上前缀。比如UserCard.vue会变成app-user-card，Dialog.vue变成app-dialog。

执行后，dist目录下会为每个组件生成对应的独立js文件，每个都是可单独引入的Web Component。

自定义每个组件的标签名（更灵活的配置） #

如果不想用统一前缀，想给每个组件单独设置标签名，可以在项目根目录创建vue.config.js，配置如下：

module.exports = {
  // 为每个组件配置单独的入口
  pages: {
    'custom-button': {
      entry: './src/components/Button.vue'
    },
    'user-card': {
      entry: './src/components/UserCard.vue'
    },
    'base-dialog': {
      entry: './src/components/Dialog.vue'
    }
  },
  configureWebpack: {
    // 输出的文件名和entry的key对应
    output: {
      filename: '[name].wc.js'
    }
  },
  pluginOptions: {
    webComponents: {
      // 指定每个组件对应的Web Component标签名
      componentNames: ['custom-button', 'user-card', 'base-dialog']
    }
  }
}

然后运行打包命令：

npm run build -- --target wc

这样每个组件都会生成对应标签名的独立Web Component文件，完全符合你的自定义需求。

几个关键注意点 #

• 样式封装：如果组件用了scoped样式，Vue CLI会自动把样式封装到Shadow DOM里，不会污染主应用的样式；如果是全局样式，建议改成scoped或者单独处理。
• Vue依赖处理：如果主应用没有引入Vue，可以在打包命令里加--inline-vue参数，把Vue本身打包到每个组件中（缺点是每个组件体积会变大）；如果主应用已经有Vue，就不用加这个参数，组件会共享主应用的Vue实例。
  示例：npm run build -- --target wc --inline-vue ./src/components/Button.vue
• 排除测试代码：只要我们打包时指定的是组件路径，而不是测试应用的main.js，就不会把测试工具的逻辑（比如路由、状态管理、App.vue）打包进去，确保组件是纯净的。

测试组件 #

打包完成后，在非Vue主应用里引入生成的js文件，然后直接在HTML里用对应的标签就行，比如：

<script src="./custom-button.js"></script>
<custom-button>点击我</custom-button>

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