vue spa php,基于single-spa的vue微前端框架搭建
一、一套微前端框架通常包含四个部分：
3.主应用
4.子应用
这里重点介绍一下，主应用，子应用的搭建过程，首先通过vue-cli创建2个vue应用，vue_main主应用，vue_child子应用
二、修改主应用vue_main修改index.html，在head部分添加以下代码：
{
"imports": {
"child": "http://localhost:8081/app.js", // 确保文件浏览器中可以打开
"single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js",
"vue": "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js",
"vue-router": "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue-router.min.js"
}
}
2.修改app.html
export default {
name: 'App',
mounted () {
window.System.import('single-spa').then((res) => {
var singleSpa = res
singleSpa.registerApplication('child', () => window.System.import('child'), location => true)
singleSpa.start()
})
}
}
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
这样主应用就修改好了
三、修改子应用vue_child
1.安装项目依赖npm i single-spa-vue systemjs-webpack-interop
2.修改入口文件main.js// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import { setPublicPath } from 'systemjs-webpack-interop'
import Vue from 'vue'
import App from './App'
import singleSpaVue from 'single-spa-vue'
import router from './router'
setPublicPath('child')
Vue.config.productionTip = false
/* eslint-disable no-new */
// new Vue({
// el: '#app',
// router,
// components: { App },
// template: ''
// })
const vueLifecycles = singleSpaVue({
Vue,
appOptions: {
render: (h) => h(App),
router
}
})
export const bootstrap = vueLifecycles.bootstrap
export const mount = vueLifecycles.mount
export const unmount = vueLifecycles.unmount
3.修改webpack配置文件webpack.base.conf.jsoutput: {
path: config.build.assetsRoot,
filename: '[name].js',
library:'child', // 新添加
libraryTarget: 'umd', // 新添加
publicPath: process.env.NODE_ENV === 'production'
? config.build.assetsPublicPath
: config.dev.assetsPublicPath
},
4.修改webpack配置文件webpack.dev.conf.js，确保子应用允许跨域devServer: {
headers:{
"Access-Control-Allow-Origin":"*"
}
}
四.运行项目查看效果，这样在主应用中加载了子应用的内容
五、通过脚手架生成子应用npm init single-spa