Micro-front end--Official website demo operation instructions of the unbounded solution

download run

deom download

The official demo is on GitHub (there is a problem with access, it needs to be set up, and I have not set it up)

Link: https://github.com/Tencent/wujie (given elsewhere, can also be used)

pnpm download

The packages in it need to be downloaded through pnpm, and there is a problem with using npm to download! ! !

npm install pnpm -g

Note: The latest version of pnpm is downloaded by default, and the supported node is above 14.6. For the following versions, please go to the official website of pnpm to find the historical version

run

npm run start

The following interface appears, which means success:

join personal project

create project

Create your own project in examples (I use vue2, so create a vue2 project, and so on)

Note: The main page project is where all our projects finally run, which is equivalent to main

Personal project - configure routing

Initial project (experimental)

Configure routing, which is convenient for display and use later. If you have vue scaffolding in your personal project, it is recommended to use a simple method to generate a routing

vue add router

A router.js file and two path templates will be automatically generated

complete project

It needs to be set in the route main file as follows

export default new Router({
    mode: 'history',
    base: process.env.NODE_ENV === 'production' ? '/{项目名称}/' : '',
    routes: [{
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/about',
            name: 'about',
            // route level code-splitting
            // this generates a separate chunk (about.[hash].js) for this route
            // which is lazy-loaded when the route is visited.
            component: () => import( /* webpackChunkName: "about" */ './views/About.vue')
        }
    ]
})

start association

In main-vue, start to associate personal projects with unbounded, and do the following operations in its router.js file

First, import a page

import VueTest from "../views/Vuetest.vue";

Then configure the routing path, note that the value of the name attribute is the same as before

{
        path: "/vuetest",
        name: "vue_test",
        component: VueTest,
 },

As shown below

Then add the pages we imported to the views file

As shown below

code:

<template>
    <div>
        <h2>ADASDADAD!!</h2>
        <WujieVue width="100%" height="100%" name="vue_dtest" :url="viteUrl" :sync="true"></WujieVue>
    </div>
</template>

<script>
import hostMap from '../hostMap.js';
export default {
    data() {
        return {
            viteUrl: hostMap('//localhost:8080/')
        };
    }
};
</script>

<style></style>

Then add the configuration of the personal project in the hostMap.js file of main-vue. The value of the project address is different. Don’t write the same as I wrote, it will not work.

code:

const map = {
    "//localhost:7100/": "//wujie-micro.github.io/demo-react17/",
    "//localhost:7200/": "//wujie-micro.github.io/demo-vue2/",
    "//localhost:7300/": "//wujie-micro.github.io/demo-vue3/",
    "//localhost:7400/": "//wujie-micro.github.io/demo-angular12/",
    "//localhost:7500/": "//wujie-micro.github.io/demo-vite/",
    "//localhost:8080/": "//localhost:8080/",
    "//localhost:7600/": "//wujie-micro.github.io/demo-react16/",
    "//localhost:7700/": "//wujie-micro.github.io/demo-main-react/",
    "//localhost:8000/": "//wujie-micro.github.io/demo-main-vue/",
};

export default function hostMap(host) {
    if (process.env.NODE_ENV === "production") return map[host];
    return host;
}

Finally, add the router-link statement to app.vue in main-vue

The project will display the corresponding directory

question:

If the same problem as shown in the figure below occurs, our page has not been loaded. First, our personal project must be running before the page can be displayed

If you open the console, you will find an error

Access to fetch at *** from origin *** has been blocked by CORS policy: No 'Access-Control-Allow-Origin'

It means that we have not solved the cross-domain problem

Solution

Set the proxy for our personal project, such as the vue.config.js file

/ vue.config.js

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
module.exports = {
    publicPath: "./",
    devServer: {
        headers: {
            "Access-Control-Allow-Origin": "*",
            "Access-Control-Allow-Headers": "*",
            "Access-Control-Allow-Methods": "*",
        },
        port: "8080",
    },
};

然后重新运行下我们个人的项目，再次刷新页面，就会出现结果，路由跳转也没有问题