[JavaScript知识库]microApp微前端项目搭建教程(更新到项目搭建其他内容待续)

目录

一.整体项目准备

二.基座应用搭建

三.子应用配置

数据传递及项目管理命令待更新

一.整体项目准备

安装?npm run all 方便后面的开发和代码处理

npm i npm-run-all

其他命令之后在写?

二.基座应用搭建

我们要拉一个基座项目进来, 为了后期修改方便,我这里的基座应用本身也是个单独项目

用引入子仓库的方法引入进来

那就copy一下我之前vite-vue3项目教程里的代码拉个新仓库吧

点击跳转项目github连接

这里选择使用vite搭建基座应用,一个简单的demo没啥需求,webpack那构建速度实在是生命之敌

当然有需求的可以改用webpack,直接看官方文档就行了

然后我们把项目作为子仓库拉进来:

git remote add <别名> <git仓库地址>

git remote add base https://github.com/shinjie1210/micro-base.git  

git subtree add --prefix=<本地路径> <拉取时的别名> <分支>:

git subtree add --prefix=base base main

这样基座应用就拉取到了,然后我们就入基座进行一些修改即可

cd base

安装依赖?

npm i

?安装microApp

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

在main.js里引入

// main.js
import microApp from '@micro-zoe/micro-app'
microApp.start()

修改vite.config.js,配置baseurl

//vue.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base: '/base/',
  plugins: [vue({
    template: {
      compilerOptions: {
        isCustomElement: tag => /^micro-app/.test(tag)//处理基座应用报错microapp未定义问题
      }
    }
  })]
})

添加子路由页面,简单点就叫son吧

这里的url为了适用于线上部署,所以需要使用变量

<!-- son.vue -->
<template>
    <div>
        <!--
      name(必传)：应用名称
      url(必传)：应用地址，会被自动补全
      baseroute(可选)：基座应用分配给子应用的基础路由，就是上面的 `/son`
     -->
        <micro-app name="authority" :url="url" baseroute="/base/son">
        </micro-app>
    </div>
</template>
<script>
import config from '../config/config.js'
export default {
    data() {
        return {
            url: config.son
        }
    },
    methods: {

    },
};
</script>

所以我们增加一个config文件进行配置,多个子应用可以在此处同时配置

//config.js

const config = { son: 'http://localhost:4001/' }
// 线上环境地址
if (!/localhost/.test(window.location.href)) {
    // 基座应用和子应用部署在同一个域名下，这里使用location.origin进行补全
    Object.keys(config).forEach((key) => {
        config[key] = window.location.origin
    })
}
export default config

然后我们去路由页面配置路由

//router/index.js
import {
    createRouter,
    createWebHistory
} from 'vue-router'
import son from '../views/son.vue'

const routes = [{
    path: '/',
    redirect: '/foo'
}, {
    path: '/foo',
    component: () => import('../views/foo.vue')
}, {
    path: '/bar',
    component: () => import('../views/bar.vue')
}, {
    // 👇 非严格匹配，/son/* 都指向 son 页面
    path: '/son/:page*', // vue-router@4.x path的写法为：'/son/:page*'
    name: 'son',
    component: son,
}]
const router = createRouter({
    // 设置主应用基础路由为base(用于后续部署)，则子应用基础路由(baseroute)为/base/xxx
    history: createWebHistory(
        import.meta.env.BASE_URL),
    routes
})
export default router

那么目前为止,基座应用就配置好了,接下来就配置一个子应用吧

三.子应用配置

我们同样引入一个项目作为子应用,鉴于子应用也是用vite时需要调整的配置太过繁琐,这里就提供一个vue3+vuecli的项目作为子应用吧

点击跳转项目github地址

?然后我们把项目作为子仓库拉进来:

git remote add <别名> <git仓库地址>

git remote add son https://github.com/shinjie1210/micro-son.git  

git subtree add --prefix=<本地路径> <拉取时的别名> <分支>:

git subtree add --prefix=son son main

然后是安装依赖

npm i

随后我们对子应用进行一些修改

现在vue.config.js里添加跨域支持

//vue.config.js

module.exports = {
    lintOnSave: false,
    devServer: {
        hot: false,
        disableHostCheck: true,
        port: 4001,
        open: false,
        overlay: {
            warnings: false,
            errors: true,
        },
        headers: {
            'Access-Control-Allow-Origin': '*',
        },
    },
};

然后设置基础路由

//router/index.js
import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  }
]


const router = createRouter({
  history: createWebHistory(window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL),
  routes,
});

export default router

配置pubilcpath文件,在main.js内引入

避免子应用的静态资源使用相对地址时加载失败的情况，如果子应用不是webpack构建的，这一步可以省略。

在子应用src目录下创建名称为public-path.js的文件，并添加如下内容

//public-path.js
// __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量
if (window.__MICRO_APP_ENVIRONMENT__) {
  // eslint-disable-next-line
  __webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
}

在子应用入口文件的最顶部引入public-path.js

// entry
import './public-path'

那么到这里,一个基础的微前端应用就完成构建了,分别把两个项目跑起来之后打开基座应用,就可以测试了，完整项目源码见这里?

点击前往获取源码

未完待续……

数据传递及项目管理命令待更新