index.html - 掘金

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <meta name="importmap-type" content="systemjs-importmap">
    <script type="systemjs-importmap">
        {
          "imports": {
            "navbar": "http://localhost:8080/app.js",
            "app1": "http://localhost:8081/app.js",
            "app2/page1": "http://localhost:8082/page1.js",
            "app2/page2": "http://localhost:8082/page2.js",
            "vue": "./libs/vue.js",
            "vue-router": "https://cdn.jsdelivr.net/npm/vue-router@3.0.7/dist/vue-router.min.js",
            "single-spa": "https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js"
          }
        }
    </script>
    <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/single-spa/4.3.7/system/single-spa.min.js" as="script" crossorigin="anonymous" />
    <script src="/libs/system.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/amd.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-exports.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/named-register.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/6.1.1/extras/use-default.min.js"></script>
</head>
<body>
    <script>
        (function(){
            Promise.all(
                [
                    System.import('single-spa'),
                    System.import('vue'),
                    System.import('vue-router')
                ]
            )
            .then((res)=>{
                var singleSpa=res;
            
                // singleSpa[0].registerApplication(
                //     'navbar',
                //     () => System.import('navbar'),
                //     location => location.hash.startsWith('#/main'),
                //     { authToken: "d83jD63UdZ6RS6f70D0", data2: 'data2' }
                // );

                // singleSpa[0].registerApplication(
                //     'app1',
                //     ()=>System.import('app1'),
                //     (location)=>{ return location.hash.startsWith(`#/main/app1`)},
                //     { authToken: "d83jD63UdZ6RS6f70D0", publicPath: 'app1' }
                // );

                singleSpa[0].registerApplication('app2/page1',()=>System.import('app2/page1'),(location)=>{
                    return location.hash.startsWith(`#/app2/page1`);
                });

                singleSpa[0].registerApplication('app2/page2',()=>System.import('app2/page2'),(location)=>{
                    return location.hash.startsWith(`#/app2/page2`);
                });

                singleSpa[0].start();
            })
        })()
    </script>
    <div id="app1-test"></div>
</body>
</html>