Preface

        Micro Front-end: Theory Paper
        Micro Front End - portal Project
        Micro Front End - menu & Project 1 (React)
The previous article explained the application of react project in single-spa micro-front-end architecture. This article is the last one, the application of vue project in this architecture.

Project2

project2 is not built by ourselves, but is generated directly using vue-cli3 scaffolding.


The directory structure is shown below, and the reddened file is the newly added file (output.js is the default configuration reference of webpack that I used to modify vue)
        


Let's see what the two new documents have done.
        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,
    ];

As you can see, this file mainly takes the entry component of Vue as the rendering component and renders it into the Dom e element of portal project index.html with id of vue. Attention should be paid to introducing single-spa-vue dependency package.


        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')
    }

We modify the entry file of webpack to add project 2.js above us, set the allowable cross-domain, and change the name of the exit file.
Finally, there is a very critical issue. When packaging static resources, we access the image in project 2 project in index.html, default is relative address, relative root directory is the domain name and port number of portal project, which is obviously not able to access the image packaged in project 2 project, we can only access the image packaged in project 2 project. The related resources can only be accessed through the domain name and port number plus the relative address in project 2. Therefore, here we modify the file name of the picture package in project 2, without hash value, and when we refer to the picture in the project, we refer to it in this way:

<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 is the url address where project 2 runs, and/img/logo.png is the relative path after the logo image is packaged; because the unreferenced image is not packaged, webpack needs to import: import logo from'. / assets/logo.png', so webpack will pack the image into it. Go. Only then can the normal visit be made.


This problem also exists in the previous menu & Project 1 project. It seems that there will always be such a problem when it comes to static resource access. I just started to get into touch with this micro-front-end architecture. Now I also think of this solution. If there is a better way for small partners to share one in the message. Ha ha!

Project 2 project source code
Project source code

Micro Front-end: Theory Paper
Micro Front End - portal Project
Micro Front End - menu & Project 1 (React)

Finally, summarize the steps for the project to run


1. Open the service of the public dependency module. My public dependency module is in the common-deps-static folder under the portal project. It only needs to open the service under this folder. It can use the http-server plug-in, the port is set to 8000, and the cross-domain-cors is set.
2. Under the portal, menu and project 1 projects, execute the command npm run start
3. Under project 2, execute the command npm run serve
4. Open the page in chrome: http://localhost:8233/.