微前端之 single-spa 应用demo

最新推荐文章于 2024-03-12 00:00:00 发布

Janicelily

最新推荐文章于 2024-03-12 00:00:00 发布

阅读量420

点赞数

文章标签： javascript vue.js

本文链接：https://blog.csdn.net/Beth__hui/article/details/112802480

版权

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

摘要由CSDN通过智能技术生成

一、对于子应用的修改
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