Vue.js 构建Vue微前端应用程序（带有路由和vuex商店）
我需要有关使用Vuex、Vue路由器和Vue i18n的Microfront应用程序的构建/分发配置的帮助 TL；DR:我在构建Microfront应用程序时遇到问题，该应用程序将导入现有系统。我们的团队试图通过“vue cli服务”和“@vue/web components wrapper”将应用程序构建为网络组件，但这两种方法都失败了，因为构建入口点必须是.vue文件（vue组件），并且我们无法将Vuex/vue Router和vue i18n作为vue实例选项插入.vue文件中。我们也尝试过以库的形式构建，但在加载块时会出错 简言之，我的团队正在创建一个独立的应用程序，其目标是在现有系统上进行注入。由于该应用程序必须与技术无关，因此该团队选择使用微前端架构，以vue作为选择的框架。该应用程序使用Vuex和Vue路由器处理内部数据和导航，用户在应用程序的不同模块上提供的数据被发送到api进行处理和存储 该项目是使用Vue CLI创建的，目的是将应用程序包装到可以导入并在其他系统上使用的web组件上。问题是，在为生产构建时，vue cli服务要求webcomponent构建目标的入口点为.vue文件（），但这使我们无法插入vuex、vue路由器和i18n配置，因为我们无法创建新的vue实例 我们还尝试使用“@vue/web component wrapper”在main.js上定义web组件，但这不起作用，因为vue实例（新vue）没有定义渲染或模板化。这种方法还要求入口点是.vue文件或组件构造函数 目前，我们正在尝试将模块导出为lib，它将返回Vue实例（仍未装载），然后可以将其装载到使用者定义的div上，但使用者在加载捆绑块时出错。我相信这可能是因为vue.config文件上没有配置publicPath，但我们无法进行此类配置，因为应用程序应该完全不知道它在哪里使用 以下是基本项目文件 main.jsVue.js 构建Vue微前端应用程序（带有路由和vuex商店）,vue.js,build,vuex,vue-router,micro-frontend,Vue.js,Build,Vuex,Vue Router,Micro Frontend,我需要有关使用Vuex、Vue路由器和Vue i18n的Microfront应用程序的构建/分发配置的帮助 TL；DR:我在构建Microfront应用程序时遇到问题，该应用程序将导入现有系统。我们的团队试图通过“vue cli服务”和“@vue/web components wrapper”将应用程序构建为网络组件，但这两种方法都失败了，因为构建入口点必须是.vue文件（vue组件），并且我们无法将Vuex/vue Router和vue i18n作为vue实例选项插入.vue文件中。我们也尝试
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()
<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>
从“@/views/Home”导入主页
导出默认值{
组成部分：{
家：家，
}
}
@导入“./style/style.scss”