构建 Vue 微前端应用程序（带有路由和 vuex 存储）

我需要帮助配置使用 Vuex、Vue-Router 和 Vue i18n 的微前端应用程序的构建/分发。

TL;DR：我在构建将导入到现有系统中的微前端应用程序时遇到问题。我们的团队尝试通过“vue-cli-service”和“@vue/web-components-wrapper”将应用程序构建为 Web 组件，但这两种方法都失败了，因为构建入口点必须是 .vue 文件（Vue 组件）并且我们无法将 Vuex / Vue Router 和 Vue i18n 作为 vue 实例选项注入到 .vue 文件中。我们还尝试构建为库，但在加载块时出错。

简而言之，与我合作的团队正在创建一个独立的应用程序，旨在可注入到现有的系统上。由于应用程序必须与技术无关，因此团队选择使用微前端架构，并以 vue 作为选择的框架。该应用程序使用Vuex和Vue Router来处理内部数据和导航，并且用户在应用程序的不同模块上提供的数据被发送到api进行处理和存储。

该项目是使用 Vue CLI 创建的，目标是将应用程序包装在可以在其他系统上导入和使用的 Web 组件上。问题是，在进行生产构建时，vue-cli-service 要求 WebComponent 构建目标的入口点是 .vue 文件（https://cli.vuejs.org/guide/build-targets.html#web-component https://cli.vuejs.org/guide/build-targets.html#web-component），但这使得我们无法注入 vuex、vue-router 和 i18n 配置，因为我们无法创建新的 vue 实例。

我们还尝试使用“@vue/web-component-wrapper”在 main.js 上定义 Web 组件，但这不起作用，因为 vue 实例（新 Vue）没有定义渲染或模板。此方法还要求入口点是 .vue 文件或组件构造函数。

目前，我们正在尝试将模块导出为 lib，它应该返回 Vue 实例（仍然未安装），然后可以将其安装在消费者定义的 div 上，但消费者在加载捆绑包块时出错。我相信这可能是因为 vue.config 文件上没有配置 publicPath，但我们无法进行此类配置，因为应用程序应该完全不知道它的使用位置。

这是基础项目文件

main.js

import Vue from 'vue'
import store from './store'
import App from './App.vue'
import router, { setNavigationRoutes } from './router-config'
import { setI18nInstance, userLanguage } from './I18n'

Vue.config.productionTip = false

const init = async () => {
  const i18n = await setI18nInstance(userLanguage)
  store.commit('SET_TRANSLATION_REF', i18n)
  setNavigationRoutes()

  return new Vue({
    store,
    router,
    i18n,
    render: h => h(App),
  })
}

export default init()

App.vue

<template>
  <div id="app">
    <home />
    <router-view />
  </div>
</template>

<script>
import Home from '@/views/Home'

export default {
  components: {
    home: Home,
  }
}
</script>
<style lang="scss">
@import './styles/style.scss'
</style>