Vue2+Module Federation集成Pinia报错：TypeError读取warn属性失败

核心原因分析 #

1. 依赖版本不兼容：当前使用的vue-router@4.x是为Vue3设计的，与Vue2不兼容，会导致Vue实例初始化异常，进而影响Pinia的挂载。
2. 共享依赖策略错误：Pinia、Vue及@vue/composition-api未配置强制单例共享，主/子应用各自实例化依赖，导致Pinia无法关联到正确的Vue上下文。
3. 子应用Store初始化逻辑冲突：子应用单独运行时会创建自己的Pinia实例，但微前端场景下应复用主应用的Pinia实例，避免多实例冲突。

分步解决方案 #

1. 修正Vue Router版本（关键第一步） #

Vue2必须搭配vue-router@3.x，修改主/子应用的package.json：

"dependencies": {
  // ...
  "vue-router": "^3.6.5"
}

执行npm install或yarn install更新依赖。

2. 配置Module Federation强制单例共享 #

修改主/子应用的vue.config.js中ModuleFederationPlugin的shared配置，确保核心依赖全局单例：

子应用（Child1）vue.config.js

const { defineConfig } = require('@vue/cli-service')
const { ModuleFederationPlugin } = require("webpack").container;
const deps = require("./package.json");

module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: 'auto',
  configureWebpack: {
    plugins: [
      new ModuleFederationPlugin({
        name: 'child1',
        filename: 'remoteEntry.js',
        exposes: {
          './ResultsPage': './src/pages/ResultsPage',
          './Test1Page' : './src/pages/Test1Page',
          './Test2Page' : './src/pages/Test2Page',
          './appStore' : './src/store/appStore.js'
        },
        shared: {
          vue: {
            singleton: true,
            requiredVersion: deps.vue,
          },
          '@vue/composition-api': {
            singleton: true,
            requiredVersion: deps['@vue/composition-api'],
          },
          pinia: {
            singleton: true,
            requiredVersion: deps.pinia,
          },
          vue-router: {
            singleton: true,
            requiredVersion: deps['vue-router'],
          }
        },
      }),
    ],
  }
})

主应用（Parent）vue.config.js

const { defineConfig } = require("@vue/cli-service");
const { ModuleFederationPlugin } = require("webpack").container;
const deps = require("./package.json");

module.exports = defineConfig({
  transpileDependencies: true,
  configureWebpack: {
    plugins: [
      new ModuleFederationPlugin({
        name: "microfrontends-library",
        remotes: {
          child1: "child1@http://localhost:3013/remoteEntry.js",
          //child2: "child2@http://localhost:3014/remoteEntry.js",
        },
        shared: {
          vue: {
            singleton: true,
            requiredVersion: deps.vue,
          },
          '@vue/composition-api': {
            singleton: true,
            requiredVersion: deps['@vue/composition-api'],
          },
          pinia: {
            singleton: true,
            requiredVersion: deps.pinia,
          },
          vue-router: {
            singleton: true,
            requiredVersion: deps['vue-router'],
          }
        },
      })
    ],
  },
});

3. 调整子应用Store的初始化逻辑 #

子应用的Store需支持两种场景：单独运行时自初始化Pinia，微前端场景下复用主应用的Pinia实例。修改src/store/appStore.js：

import { defineStore } from 'pinia'

export const useAppStore = defineStore('app', {
  state: () => ({
    // 你的状态定义
    count: 0
  }),
  actions: {
    increment() {
      this.count++
    }
  }
})

// 仅在单独运行时初始化Pinia
if (!window.__PINIA_INSTANCE__) {
  import('vue').then(({ default: Vue }) => {
    import('@vue/composition-api').then(({ default: VueCompositionAPI }) => {
      Vue.use(VueCompositionAPI)
      import('pinia').then(({ createPinia }) => {
        const pinia = createPinia()
        Vue.use(pinia)
        window.__PINIA_INSTANCE__ = pinia
      })
    })
  })
}

4. 主应用全局初始化Pinia #

修改主应用src/main.js，确保Pinia实例全局挂载：

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

// 先注册composition-api
Vue.use(VueCompositionAPI)
// 创建并注册Pinia实例
const pinia = createPinia()
Vue.use(pinia)
// 挂载到全局供子应用复用
window.__PINIA_INSTANCE__ = pinia

new Vue({
  router,
  pinia,
  render: h => h(App)
}).$mount('#app')

5. 主应用中使用子应用的Store #

在主应用组件中直接导入子应用的Store函数即可，它会自动复用全局Pinia实例：

import { useAppStore } from 'child1/appStore'

export default {
  setup() {
    const appStore = useAppStore()
    return {
      appStore,
      increment: () => appStore.increment()
    }
  }
}

验证步骤 #

1. 重新安装主/子应用依赖
2. 启动主应用和子应用
3. 访问主应用中使用子应用组件/Store的页面，检查报错是否消失

内容的提问来源于stack exchange，提问作者Raúl Garcia