微前端搭建——Micro-App

一、安装依赖，在主应用安装，子应用无需安装

npm i @micro-zoe/micro-app --save

二、在主应用入口文件引入 

// index.js

import microApp from '@micro-zoe/micro-app'

microApp.start() 

三、为子应用配置路由，在路由对应组件内引用

<template>
  <micro-app name="tms" :url="url" :baseroute="baseroute" keep-alive></micro-app>
</template>

<script setup>
import config from '@/config'
import { computed } from 'vue'

const isPro = process.env.NODE_ENV === 'production'
const baseroute = computed(() => (isPro ? '/main' : '/'))

const url = config.tms
</script>

// config配置
const isPro = process.env.NODE_ENV === 'production'
const config = {
  tms: isPro ? window.location.origin + '/tms' : 'http://localhost:5001/'
}

1. 主应用和子应用都采用history模式，其余路由配置不变
2. 子应用在src目录下添加public-path.js

if (window.__MICRO_APP_ENVIRONMENT__) {

  // eslint-disable-next-line

  __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__

}

 

 主应用vue.config.js配置

const isPro = process.env.NODE_ENV === 'production'
const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
  publicPath: isPro ? '/main/' : '/',
  chainWebpack: (config) => {
  config.module
    .rule('vue')
    .use('vue-loader')
    .tap((options) => {
      options.compilerOptions = {
        ...(options.compilerOptions || {}),
        isCustomElement: (tag) => /^micro-app/.test(tag),
      }
      return options
    })
  },
  // 其余配置
}

子应用vue.config.js配置

const { defineConfig } = require('@vue/cli-service');
const isPro = process.env.NODE_ENV === 'production';

module.exports = defineConfig({
  publicPath: isPro ? '/warehouse/' : '/',
  transpileDependencies: true,
  devServer: {
    port: 5001,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    // 其余配置
  }
  // 其余配置

 nginx配置

#主应用main
        location /main {
            alias /usr/share/nginx/html/main;
            add_header Access-Control-Allow-Origin *;
            proxy_set_header Connection "";            
            proxy_buffering off;
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            if ( $request_uri ~* .*\.(js|css|jpg|pnglgif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)){
                add_header Access-Control-Allow-Origin *;
                add_header Cache-Control max-age=7776080;
                }
            try_files $uri $uri/ /main/index.html;
        }

#子应用
        location /warehouse {
            alias /usr/share/nginx/html/warehouse;
            add_header Access-Control-Allow-Origin *;
            proxy_set_header Connection "";
            proxy_buffering off;
            proxy_redirect off;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            if ( $request_uri ~* .*\.(js|css|jpg|pnglgif|tif|dpg|jpeg|eot|svg|ttf|woff|json|mp4|rmvb|rm|wmv|avi|3gp)){
               add_header Access-Control-Allow-Origin *;
               add_header Cache-Control max-age=7776080;
               }
            try_files $uri $uri/ /warehouse/index.html;
        }