微前端 single-spa

type
status
date
slug
summary
tags
category
icon
password
😀
关于微前端： 一个简单的开头,简述这篇文章讨论的问题、目标、人物、背景是什么？并简述你给出的答案。
可以说说你的故事：阻碍、努力、结果成果，意外与转折。
 

📝 微前端引入标签

1. systemjs

按json的格式导入项目依赖

2. single-spa

引用的话语

3. 配置 import-map-overrides 插件

import-map-overrides 是一个适用于 node 环境和 browser 环境的库，主要用于覆盖 import-maps 中的映射地址，在本地开发时我们可以使用这个插件将测试环境（沙盒环境）中对应项目的 importmaps 映射地址替换成本地服务地址。

🤗 Vue配置

Vue [使用教程](https://single-spa.js.org/docs/ecosystem-vue.html)
Vue [案例](https://github.com/single-spa/single-spa-vue)
一、使用 Vue add 初始化 single-spa
CLI执行了下列操作
  1. 修改了 webpack 配置，配置适用于 single-spa 的环境
  1. install single-spa-vue
  1. 修改了 main.js 或者 main.ts 文件。
  1. 添加一个 set-pubilic-path.js 用于systemjs-webpack-interop 组件设置应用程序的公共路径
 
二、通过 shell 安装使用
  1. npm install --save single-spa-vue 或者 <script src="https://unpkg.com/single-spa-vue"></script>
  1. npm install -D vue-cli-plugin-single-spa
  1. 修改 app.vue
代码

注意事项

set-pubilic-path.js 中的值要和 packa.json 中的 name 一致
独立启动项目配置
1.添加.env.standalone 文件
  1. package.json script
不打包Vue、Vue-router
访问当前项目跨域问题
设置libraryTarget为system
vue.connfig.js

📎 动态引入依赖

  • stats-webpack-plugin ???? 如果需要加载的JS更多，甚至生产环境的 bundle 有唯一hash， 那我们还能写死文件名和列表吗？
  • 子项目打包,生成manifest.json 文件，父项目先ajax 请求 这个json文件，从中读取出需要加载的js目录，然后同步加载。
💡
 
Loading...