跳到主要内容

vite-vue3-System

一、认识​

二、实现​

2.1 index.html​

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Micro-App-Vue3</title>
  </head>
  <body>
    <div id="micro-app-vue3"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>

2.2 src/main.ts​

import { registerApplication, start } from "single-spa";
import * as app from "./single-spa-config";
import packageInfo from "../package.json";
registerApplication({
  name: packageInfo.name,
  app: app,
  activeWhen: () => true,
  customProps: {
    base: "/",
    mode: "history",
  },
});
start({
  urlRerouteOnly: true,
});

2.3 src/single-spa-config.ts​

import App from "./App.vue";
import { h, createApp } from "vue";
import createRouter from "./router";
import { AppProps } from "single-spa";
import singleSpaVue from "single-spa-vue";

type PropsType = AppProps & { base: string; mode: "hash" | "history" };

const vueLifecycles = singleSpaVue({
  createApp,
  appOptions: {
    render(props: PropsType) {
      return h(App, {
        ...props,
      });
    },
  },
  handleInstance(app, props: PropsType) {
    const { base, mode } = props;
    app.use(createRouter(base, mode));
  },
});

export const { bootstrap, mount, unmount, update } = vueLifecycles;

2.4 src/router.ts​

import {
  Router,
  createRouter,
  createWebHistory,
  createWebHashHistory,
} from "vue-router";
import Home from "./pages/Home.vue";
import About from "./pages/About.vue";

const routes = [
  { path: "/", component: Home },
  { path: "/about", component: About },
];

export default function create(base?: string, mode?: string): Router {
  return createRouter({
    history:
      mode === "history" ? createWebHistory(base) : createWebHashHistory(base),
    routes,
  });
}

2.5 src/App.vue​

<template>
  <h3>Micro-App-Vue3</h3>
  <div>
    <router-link to="/">首页</router-link>
    <router-link to="/about">关于</router-link>
  </div>
  <router-view></router-view>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

2.6 package.json​

{
  "name": "micro-app-vue3",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vue-tsc --noEmit && vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "single-spa": "^5.9.4",
    "single-spa-vue": "^2.5.1",
    "vue": "^3.2.37",
    "vue-router": "^4.0.13"
  },
  "devDependencies": {
    "@babel/types": "^7.18.10",
    "@vitejs/plugin-vue": "^3.0.0",
    "typescript": "^4.6.4",
    "vite": "^3.0.0",
    "vue-tsc": "^0.38.4"
  }
}

2.7 vite.config.ts​

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";
import packageInfo from "./package.json";

export default ({ mode }) => {
  return defineConfig({
    plugins: [vue()],
    base:
      mode === "production"
        ? `https://bolawen.github.io/MicroFrontEnd/Single-Spa-BySystem/${packageInfo.name}/`
        : "/",
    server: {
      port: 8081,
    },
    build: {
      assetsDir: "",
      outDir: "output",
      cssCodeSplit: false,
      rollupOptions: {
        input: "src/single-spa-config.ts",
        preserveEntrySignatures: "exports-only",
        external: ["axios", "lodash", "single-spa", "single-spa-vue", "moment"],
        output: {
          format: "system",
          entryFileNames: `${packageInfo.name}.[format].[hash].js`,
        },
      },
      manifest: true,
    },
  });
};