MicroApp样例搭建【Vue】

样例代码可以点击这里下载，搭建流程如下

项目创建

项目由 vue 的官方脚手架创建，基项目 base 和子项目 app_first、app_second

vue create base

vue create app_first
vue create app_second

基项目修改

添加本地运行配置文件 vue.config.js

module.exports = {
    devServer: {
        host: 'localhost'
        , port: 3000
    }
}

安装 micro-app 插件

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

添加 micro/index.js 文件

import microApp from '@micro-zoe/micro-app'
import * as config from './config'

// 启用 micro
microApp.start({
    preFetchApps: config.MICRO_APPS //加载子项目
    , globalAssets: config.GLOBAL_ASSETS // 加载全局资源
})

添加 micro/config.js 文件

// 子应用前缀
export const CHILD_PREFIX = 'app'

// 子应用地址
export const MICRO_APPS = [
    { name: 'first-child', url: `http://localhost:3001/` }
    , { name: 'second-child', url: `http://localhost:3002/` }
]

// 全局资源
export const GLOBAL_ASSETS = {
    js: []
    , css: []
}

修改入口文件 main.js，引入 micro-app 配置

import './micro'
...

修改 App.vue 文件

<template>
    <div>
        <!--路由链接-->
        ...
    </div>
    <div>
        <micro-app 
            v-if="isChild" 
            v-bind="micro" 
            destory 
            @datachange='handleDataChange'></micro-app>
        <router-view v-else></router-view>
    </div>
</template>

<script>
import { MICRO_APPS, CHILD_PREFIX } from './micro/config.js'
    
export default {
    ...
    , data(){
    	return {
    	    ...
            , isChild: false	// 是否是子模块
            , micro: {
    		url: '' 	// 子应用地址，不包含路由地址
    		, key: ''	// Vue 标签的 key 值，用于不同子模块间的切换时，组件重新渲染
    		, name: ''	// 子模块名称，值唯一
    		, data: {}	// 需要传入子模块的数据
    		, baseroute: ''	// 子模块路由地址
            }
	}
    }
    , watch: {
        $route (val){
            // 监听路由变化，改变子模块渲染
            this.changeChild(val)
        }
    }
    , created () {
        this.changeChild(this.$route)
    }
    , methods: {
        ...
	, getAppUrl (name) { // 获取子模块 url 和 name
            return MICRO_APPS.find(app => app.name === name) || {}
	}
	, changeChild (route) { // 修改子视图显示
            let path = route.path.toLowerCase()
		, paths = path.split('/')

            // 判断是否为子模块，子模块有固定的前缀
            this.isChild = paths.length > 2 && paths[1] === CHILD_PREFIX

            if (this.isChild) {
                let app = this.getAppUrl(paths[2])

                this.micro = {
                    ...app
                    , data: { name: route.name } // 根据路由和子项目跳转方式，传入对应参数
                    , key: `${app.name}`
                    , baseroute: `/${CHILD_PREFIX}/${paths[2]}`
                }
            }
	}
	, handleDataChange (event) { // 获取子路由传递的信息
            let data = event.detail.data
            if(data.route) this.$router.push({ name: data.route.name })
	}
    }
}
</script>

修改路由文件 router/index.js

...
import { CHILD_PREFIX } from '@/micro/config.js'

const routes = [
    ...
    , { // app_first 项目路由
        path: `/${CHILD_PREFIX}/first-child`
	, name: 'FirstChild'
	, children: [
            {
                path: 'home'
                , name: 'FirstHome'
            }
            , {
                path: 'about'
                , name: 'FirstAbout'
            }
        ]
    }
    , { // app_second 项目路由
	path: `/${CHILD_PREFIX}/second-child`
	, name: 'SecondChild'
	, children: [
            {
                path: 'home'
                , name: 'SecondHome'
            }
            , {
                path: 'about'
                , name: 'SecondAbout'
            }
	]
    }
]

...

子项目修改

添加本地运行配置文件 vue.config.js，设置允许跨域访问

module.exports = {
    devServer: {
        host: 'localhost'
        , port: 3001
        , headers: { // 设置本地运行的跨域权限
            'Access-Control-Allow-Origin': '*',
        }
    }
}

添加 micro/index.js 文件

// 设置 webpack 的公共路径
__webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__ || '/'

入口文件修改 mian.js

import './micro'
...

let app

/**
 * 挂载函数
 */
function mount () {
    app = new Vue({
        el: '#app'
        , router
        , render: function (h) { return h(App) }
    })
}

/**
 * 卸载函数
 */
function unmount () {
    app.$destroy()
    app.$el.innerHTML = ''
    app = null
}

// 微前端环境下，注册mount和unmount方法
if (window.__MICRO_APP_ENVIRONMENT__)
    window[`micro-app-${window.__MICRO_APP_NAME__}`] = { mount, unmount }
else
    mount()

修改 App.vue 文件

<template>
    <div id="app">
        <div id="nav">
            <router-link :to="`${prefix}/home`">Home</router-link> |
            <router-link :to="`${prefix}/about`">About</router-link> |
            <button @click="goto('SecondHome')">SecondHome</button> |
            <button @click="goto('SecondAbout')">SecondAbout</button>
        </div>
        <router-view />
    </div>
</template>

<script>
export default {
    ...
    , methods: {
        ...
        , dataListener (data) {
            // 不判断时会报一个“冗余导航【NavigationDuplicated】”的异常
            if (data.name !== this.$route.name)
                this.$router.push({ name: data.name })
        }
        , goto (name) {
            // 向基项目发送数据
            window.microApp.dispatch({ route: { name } })
        }
    }
    , created () {
        // 绑定数据【data属性】监听事件
        window.microApp && window.microApp.addDataListener(this.dataListener)
    }
    , destroyed () {
        // 移除数据【data属性】监听事件
        window.microApp && window.microApp.removeDataListener(this.dataListener)
    }
}
</script>

修改路由文件 router/index.js

...

const routes = [
    {
        path: window.__MICRO_APP_BASE_ROUTE__ || '/' // 根据项目运行的不同环境，设置路径的前缀
        , name: 'Home'
        , redirect: { name: 'FirstHome' }
        , component: () => import('../views/Empty.vue') // Empty.vue 是一个只包含 router-view的页面，用于渲染 children
        , children: [
            ...
        ]
    }
]

...

项目启动

分别进入项目文件夹，在 CMD 下运行 npm run serve，启动项目，访问 localhost:3000 查看完整的项目，也可以打开 localhost:3001 或者 localhost:3002 访问单个子项目

GIF 2022-2-11 10-53-03

一些问题处理

  • 公共模块代码

    可以将公共代码单独创建一个仓库，在各个项目中以子模块的形式引入到项目中

  • Nginx 部署

    微前端在部署到多个地址时，可以通过 nginx 的反向代理，把子项目的地址代理到主项目地址下，这样可以是主项目和子项目使用相同的 storage 存储

server {
    listen       3000;
    server_name  localhost;

    location / {
        root   D:/base/dist/;
        index  index.html index.htm;
        try_files  $uri $uri/ /index.html;
    }

    # 代理子项目
    location /first_child/ {
        proxy_pass  http://localhost:3001/;
    }
}
  
# 子项目访问端口
server {
    listen       3001;
    server_name  localhost;

    # 设置跨域访问权限
    add_header Access-Control-Allow-Origin *;

    location / {
        root  D:/first_child/dist/;
        index  index.html index.htm;
        try_files  $uri $uri/ /index.html;
    }
 }

原文链接：MicroApp样例搭建【Vue】

posted @   聚散浮生乄  阅读(1183)  评论(0)  编辑  收藏  举报
相关博文：
· MicroApp初步使用
· Git 子模块
· 微前端 micro-app 搭建
· 【前端】microApp微前端搭建简单Demo
· vue3+ts+MicroApp实战
阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理 了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
点击右上角即可分享
微信分享提示