# 前言
前面我们已经针对微前端的概念及 single-spa 内的主要功能做了介绍,下面我们要针对开发好的项目进行部署,网上针对开发的过程讲解的文档还是很多的,但是没有一整套完整的达到线上运行效果的文档,对于微应用基础镜像的构建,这里不是讲解的重点,之前针对镜像构建我写过一篇文章,可以满足不同的微应用的镜像构建 镜像构建篇 - 我是如何实现 docker 镜像 2 分钟构建、部署,在基于 root-config 进行完整案例演示
# 针对官方案例进行优化
index.ejs 内使用了 CSP
在初学阶段我安装了 single-spa-react 和 root-config 是可以正常运行的,但是安装了 single-spa-vue 发现在 root-config 内跑不起来,独立运行也是不可以的,独立运行的办法网上有,通过 window.singleSpaNavigate 来判断其是否是 single-spa 环境内
if (!window.singleSpaNavigate) {
new Vue({
render: h => h(App),
}).$mount('#app');
} else {
setPublicPath("@spa-vue/single-spa-vue", 2);
vueLifecycles = singleSpaVue({
Vue,
appOptions: {
render(h) {
console.log(this)
return h(App, {
props: {
// single -spa props are available on the "this" object. Forward them to your component as needed.
// https://single-spa.js.org/docs/building-applications#lifecyle-props
name: this.name,
mountParcel: this.mountParcel,
singleSpa: this.singleSpa,
},
});
},
},
});
}
@前端进阶之旅: 代码已经复制到剪贴板
但是这在 root-config 内还是无法正常运行,也没有任何提示,插件也只会报 mount error,baidu、google 我都搜过了,也没找着解决的办法,后来一点一点的尝试,发现是官方的案例内添加了 csp(内容安全策略) ,而我在本地环境下,使用的是 http:
<!DOCTYPE html>
<html lang="en"&