如何将Vue组件连同关联Vuex、CSS一起打包，实现跨项目复用？

方案1：库模式打包公共组件（推荐，长期维护成本最低） #

该方案完全满足plugin无需依赖core编译即可独立运行的要求，从根源解决样式、vuex依赖丢失问题。

1. 改造core项目打包配置 #

使用vue-cli或vite的库模式打包需要共享的组件，将组件、依赖的vuex模块、样式统一打包为可独立引入的静态资源：

// core项目vite.config.js示例
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  build: {
    lib: {
      entry: './src/share-components/index.js', // 共享组件入口
      name: 'CoreShareLib',
      fileName: (format) => `core-share.${format}.js`
    },
    rollupOptions: {
      // 外部化公共依赖，避免重复打包
      external: ['vue', 'vuex'],
      output: {
        globals: {
          vue: 'Vue',
          vuex: 'Vuex'
        }
      }
    },
    cssCodeSplit: false // 所有关联样式统一打包为单个css文件
  }
})

编写共享组件入口文件，同时导出组件和对应的vuex模块：

// core/src/share-components/index.js
import CoreComp1 from './CoreComp1.vue'
// 导出组件依赖的vuex assets模块
import assetsModule from '../store/modules/assets.js'

export { CoreComp1, assetsModule }
// 支持全局注册的插件模式
export default {
  install(Vue) {
    Vue.component('CoreComp1', CoreComp1)
  }
}

执行打包后会得到core-share.umd.js、core-share.css两个文件，将这两个文件复制到plugin项目的public目录下即可。

2. plugin项目接入共享包 #

无需修改plugin的编译配置，直接在运行时引入打包好的资源即可：

<!-- plugin项目入口index.html -->
<link rel="stylesheet" href="./core-share.css">
<script src="./core-share.umd.js"></script>

在plugin的vuex store中注册共享的assets模块，匹配组件中mapActions的模块名：

// plugin项目store/index.js
import Vuex from 'vuex'
import { assetsModule } from '../public/core-share.umd.js'

export default new Vuex.Store({
  modules: {
    // 模块名必须和core组件中使用的"assets"完全一致
    assets: assetsModule
  },
  // plugin自有store配置保留
  state: {},
  mutations: {}
})

业务代码中直接使用组件即可：

<template>
  <CoreComp1 />
</template>
<script>
import { CoreComp1 } from '../public/core-share.umd.js'
export default {
  components: { CoreComp1 }
}
</script>

方案2：兼容现有iframe挂载逻辑（临时修复） #

如果暂时不想调整现有架构，可通过以下方式快速修复问题：

• 样式丢失修复：将core项目的全量公共css文件同步到plugin项目，在plugin的入口html中引入；或者在plugin加载时动态创建link标签加载core的css资源地址
• vuex报错修复：将core项目的vuex store实例同步挂载到parent.document上，在plugin的vue实例初始化时直接传入该store实例；或者将assets模块单独导出后在plugin的store中注册同名模块

注意事项 #

• 两个项目的vue、vuex依赖版本需保持完全一致，避免出现不兼容问题
• 若组件存在依赖core项目的全局注册方法/自定义属性，需同步到plugin的运行环境中

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