如何将完整Vue.js应用打包为npm包并作为Web组件引入？

当然可以。你不仅能把完整Vue应用打包成npm包，还可以将其封装为Web组件（Custom Element），直接在其他框架（甚至纯HTML）中导入使用。下面是具体的实现步骤，分别基于Vue CLI（适用于Vue 2）和Vite（适用于Vue 3）两种主流构建工具：

使用Vue CLI构建（Vue 2） #

1. 配置Web组件支持
   在项目根目录创建或修改vue.config.js，添加如下配置，让CLI按照Web组件的规范打包：

   module.exports = {
     configureWebpack: {
       output: {
         // 定义组件的全局名称
         library: 'MyVueAppWebComponent',
         libraryTarget: 'umd',
         umdNamedDefine: true
       }
     },
     chainWebpack: config => {
       config.module
         .rule('vue')
         .use('vue-loader')
         .tap(options => {
           options.compilerOptions = {
             ...options.compilerOptions,
             // 标记自定义元素，避免Vue编译报错
             isCustomElement: tag => tag.startsWith('my-vue-app')
           }
           return options
         })
     }
   }
   

2. 修改入口文件注册Web组件
   安装依赖包@vue/web-component-wrapper（Vue 2需要它来转换组件为Web组件）：

   npm install @vue/web-component-wrapper --save
   

   然后修改src/main.js：

   import Vue from 'vue'
   import App from './App.vue'
   import wrap from '@vue/web-component-wrapper'
   
   // 将Vue根组件转换为Web组件
   const MyVueApp = wrap(Vue, App)
   // 注册为全局自定义元素
   window.customElements.define('my-vue-app', MyVueApp)
   
   // 可选：保留原Vue应用的开发入口，方便本地调试
   new Vue({
     render: h => h(App)
   }).$mount('#app')
   

3. 打包并使用
   执行打包命令：

   npm run build
   

   打包后的文件在dist目录。你可以把这个目录的内容发布为npm包，或者直接在其他项目中引入打包后的UMD文件，然后在HTML中用<my-vue-app></my-vue-app>标签调用你的Vue应用。

使用Vite构建（Vue 3） #

Vue 3原生支持自定义元素，不需要额外依赖，步骤更简洁：

1. 配置Vite构建规则
   修改vite.config.js：

   import { defineConfig } from 'vite'
   import vue from '@vitejs/plugin-vue'
   
   export default defineConfig({
     plugins: [
       vue({
         // 开启自定义元素模式
         customElement: true
       })
     ],
     build: {
       lib: {
         entry: './src/main.js',
         name: 'MyVueAppWebComponent',
         fileName: format => `my-vue-app.${format}.js`
       },
       rollupOptions: {
         // 如果宿主应用已安装Vue，可将其设为外部依赖减小包体积
         external: ['vue'],
         output: {
           globals: {
             vue: 'Vue'
           }
         }
       }
     }
   })
   

2. 修改入口文件注册自定义元素
   修改src/main.js：

   import { defineCustomElement } from 'vue'
   import App from './App.vue'
   
   // 将Vue根组件转换为自定义元素
   const MyVueAppElement = defineCustomElement(App)
   // 注册到全局自定义元素列表
   customElements.define('my-vue-app', MyVueAppElement)
   
   // 可选：保留原Vue应用的开发入口，方便本地调试
   import { createApp } from 'vue'
   createApp(App).mount('#app')
   

3. 打包并发布
   执行打包命令：

   npm run build
   

   打包后的产物在dist目录。在package.json中配置main和module字段指向对应的打包文件，然后执行npm publish即可发布为npm包。其他项目安装后，只需导入包，就能在HTML中使用<my-vue-app></my-vue-app>。

注意事项 #

• 样式隔离：Vue 3的defineCustomElement默认启用Shadow DOM，样式会自动隔离；Vue 2可通过scoped样式配合Web组件的Shadow DOM实现隔离。
• 依赖处理：如果希望打包后的包包含Vue，可移除Vite配置中的external: ['vue']，或修改Vue CLI的configureWebpack.externals。
• 属性传递：Web组件支持通过HTML属性传递数据，Vue组件中需用props接收这些属性。

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