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