微前端 —— project2项目（VUE）
前言
微前端 —— 理论篇
微前端 —— portal项目
微前端 —— menu&&project1（React）
前一篇文章讲解了react项目在single-spa微前端架构中的应用，本篇为最后一篇，vue项目在此架构中的应用。
Project2
project2项目我们就不自己搭建了，直接使用 vue-cli3 脚手架生成。
目录结构如下所示，标红的为新增的文件（output.js是我用来修改vue的webpack默认配置参考用的）
我们来看看新增的两个文件做了什么吧
project2.js
import Vue from 'vue';
import singleSpaVue from 'single-spa-vue';
import App from './App.vue'
const vueLifecycles = singleSpaVue({
Vue,
appOptions: {
el: '#vue',
render: r => r(App)
}
});
export const bootstrap = [
vueLifecycles.bootstrap,
];
export const mount = [
vueLifecycles.mount,
];
export const unmount = [
vueLifecycles.unmount,
]; 可以看出，这个文件主要是将vue的入口组件作为渲染组件，将其渲染到portal项目index.html中id为vue的Dom元素中，注意引入single-spa-vue依赖包
vue.config.js
const webpack = require('webpack')
const path = require('path');
module.exports = {
chainWebpack: config => {
config.entryPoints.clear()
config.entry('project2').add('./src/project2.js').end()
config.output.filename('project2.js').library('project2').libraryTarget('amd').end()
config.devServer.port(8237).headers({
"Access-Control-Allow-Origin": "*",
})
config.module.rule('images').use('url-loader').loader('url-loader').tap(options => ({
limit: 4096,
fallback: {
loader: 'file-loader',
options: {
name: 'img/[name].[ext]'
}
}
}))
},
outputDir: path.resolve(__dirname, 'build/project2')
} 我们修改webpack的入口文件为我们上面新增的project2.js，设置允许跨域，修改出口文件的名称
最后还有一个非常关键的问题，在打包静态资源的时候，在index.html中访问project2项目中的图片，默认为相对地址，相对的根目录是portal项目的域名和端口号，这明显是访问不到project2项目中打包的图片，我们只能通过project2项目中的域名和端口号加上相对地址才能访问到相关资源。因此，这里修改下project2项目中图片打包的文件名，不加hash值，并且在项目中引用图片的时候，通过这样的方式引用：
<template>
<div id="vue">
<img alt="Vue logo" src="http://localhost:8237/img/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import logo from './assets/logo.png'
export default {
name: 'app',
components: {
HelloWorld
}
}
</script> http://localhost:8237是project2项目跑起来的url地址，/img/logo.png是logo图片打包后的相对路径；由于未被引用的图片，webpack不进行打包，因此在下面需要import一下：import logo from './assets/logo.png'，这样webpack就会将图片打包进去。才能正常访问。
这个问题在之前的menu&&project1项目中也同样存在，有关静态资源访问相关的，好像都会有这样的问题，我也是才开始接触这个微前端架构，目前也就想到这个解决方法，要是有小伙伴有更好的方法，在留言中分享一下哈！
微前端 —— 理论篇
微前端 —— portal项目
微前端 —— menu&&project1（React）
最后总结一下这个项目运行起来的步骤
1.开启公共依赖模块的服务，我的公共依赖模块在portal项目下common-deps-static文件夹中，只需要在这个文件夹下开启服务即可，可以通过http-server插件，端口设置为8000，并且设置跨域--cors
2.在portal、menu、project1项目下，分别执行命令npm run start
3.在project2项目下，执行命令npm run serve
4.chrome中打开页面：http://localhost:8233/即可