微前端之 single-spa 应用demo

最新推荐文章于 2024-03-12 23:27:56 发布

原创

最新推荐文章于 2024-03-12 23:27:56 发布 · 524 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

这篇博客详细介绍了如何使用single-spa搭建微前端应用，包括子应用和主应用的配置步骤。在子应用中，主要修改了main.js和vue.config.js文件，而在主应用中，重点在于app.vue中的挂载点设置和main.js的配置。目前存在的问题是样式没有隔离，后续将探讨解决方案。

一、对于子应用的修改
1、main.js 文件

import Vue from 'vue'
import singleSpaVue from 'single-spa-vue';
import router from './router';
import App from './App.vue'

Vue.config.productionTip = false

const appOptions = {
   
   
  el: '#vue', // 主应用中你需要挂载到的地方 的div， id名
  router,
  render: h => h(App)
}
// 如果是在主应用中访问
if(window.singleSpaNavigate){
   
   
  __webpack_public_path__ = 'http://localhost:10000/'
}

// 单独访问子应用的正常挂载
if(!window.singleSpaNavigate){
   
   
  delete appOptions.el;
  new Vue(appOptions