MicroApp

子项目修改

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

module.exports = {
    devServer: {
        host: 'localhost',
        port: 3001,
        headers: {
            'Access-Control-Allow-Origin': '*',
        }
    }
}

设置基础路由（如果基座是history路由，子应用是hash路由，这一步可省略）

//  router/index.js

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

const routes = [
    {
        path: window.__MICRO_APP_BASE_ROUTE__ || '/',
        name: 'Home',
        component: Home
    },
    {
        path: '/page',
        name: 'page',
        component: () => import('../views/page.vue')
    },
]

const router = createRouter({
  // 👇 __MICRO_APP_BASE_ROUTE__ 为micro-app传入的基础路由
  history: createWebHistory(window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL),
  mode: 'history',
  routes
})

export default router

设置publicPath

这一步借助了webpack的功能，避免子应用的静态资源使用相对地址时加载失败的情况，详情参考webpack文档 publicPath

如果子应用不是webpack构建的，这一步可以省略。

步骤1:在子应用src目录下创建名称为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__
}

步骤2: 在子应用入口文件的最顶部main.js引入public-path.js

// main.js
import './public-path'

MicroApp搭建样例(二)

MicroApp

子项目修改