Coexisting Vue Microfrontends 项目教程

最新推荐文章于 2024-09-14 07:37:41 发布

褚知茉Jade

最新推荐文章于 2024-09-14 07:37:41 发布

阅读量335

点赞数 5

本文链接：https://blog.csdn.net/gitblog_00075/article/details/141810140

版权

Coexisting Vue Microfrontends 项目教程

coexisting-vue-microfrontends项目地址:https://gitcode.com/gh_mirrors/co/coexisting-vue-microfrontends

1. 项目的目录结构及介绍

coexisting-vue-microfrontends/
├── app1/
│   ├── public/
│   ├── src/
│   ├── package.json
│   ├── vue.config.js
│   └── ...
├── app2/
│   ├── public/
│   ├── src/
│   ├── package.json
│   ├── vue.config.js
│   └── ...
├── navbar/
│   ├── public/
│   ├── src/
│   ├── package.json
│   ├── vue.config.js
│   └── ...
├── root-html-file/
│   ├── index.html
│   ├── package.json
│   └── ...
├── .gitignore
├── LICENSE
├── Makefile
└── README.md

目录结构介绍

app1/ 和 app2/: 这两个目录分别包含两个独立的 Vue 应用，每个应用都有自己的 public/ 和 src/ 目录，以及 package.json 和 vue.config.js 配置文件。
navbar/: 这个目录包含一个导航栏组件，它也是一个独立的 Vue 应用。
root-html-file/: 这个目录包含根 HTML 文件和相关的配置文件，用于加载和协调各个微前端应用。
.gitignore: Git 忽略文件。
LICENSE: 项目许可证。
Makefile: 用于构建和部署的 Makefile 文件。
README.md: 项目说明文档。

2. 项目的启动文件介绍

root-html-file/index.html

这是项目的根 HTML 文件，负责加载和初始化各个微前端应用。文件内容如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Coexisting Vue Microfrontends</title>
</head>
<body>
  <script src="https://unpkg.com/single-spa@5.9.0/lib/system/single-spa.min.js"></script>
  <script type="systemjs-importmap">
    {
      "imports": {
        "@vue-mf/root-config": "//localhost:9000/vue-mf-root-config.js",
        "@vue-mf/navbar": "//localhost:8080/js/app.js",
        "@vue-mf/app1": "//localhost:8081/js/app.js",
        "@vue-mf/app2": "//localhost:8082/js/app.js"
      }
    }
  </script>
  <script src="https://cdn.jsdelivr.net/npm/import-map-overrides@2.0.0/dist/import-map-overrides.js"></script>
  <script>
    singleSpa.registerApplication('@vue-mf/navbar', () => System.import('@vue-mf/navbar'), location => true);
    singleSpa.registerApplication('@vue-mf/app1', () => System.import('@vue-mf/app1'), location => true);
    singleSpa.registerApplication('@vue-mf/app2', () => System.import('@vue-mf/app2'), location => true);
    singleSpa.start();
  </script>
</body>
</html>

app1/src/main.js

这是 app1 应用的入口文件，负责初始化 Vue 应用。文件内容如下：

import Vue from 'vue';
import singleSpaVue from 'single-spa-vue';
import App from './App.vue';

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    el: '#vue-app1',
    render: h => h(App)
  }
});

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;