2

前言

        微前端 —— 理论篇
        微前端 —— 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项目中也同样存在,有关静态资源访问相关的,好像都会有这样的问题,我也是才开始接触这个微前端架构,目前也就想到这个解决方法,要是有小伙伴有更好的方法,在留言中分享一下哈!

Project2项目源码
项目源码

微前端 —— 理论篇
微前端 —— 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/即可


Winer
458 声望202 粉丝

一入前端深似海