3

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

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

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

该项目是使用 Vue CLI 创建的，目标是将应用程序包装在一个 Web 组件上，该组件可以在其他系统上导入和使用。问题是，在为生产构建时，vue-cli-service 要求 webcomponent 构建目标的入口点是 .vue 文件（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()

应用程序.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>
4

0 回答 0