微前端--无界方案之官网demo操作说明

这篇具有很好参考价值的文章主要介绍了微前端--无界方案之官网demo操作说明。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

下载运行

deom下载

官方demo在GitHub(访问有问题,需要设置,本人未设置)

链接:https://github.com/Tencent/wujie (别处给的,也能用)

pnpm下载

其中的包需要通过pnpm下载,使用npm下载存在问题!!!

npm install pnpm -g

注:默认下载最新版pnpm,支持的node为14.6以上,以下版本请到pnpm官网找历史版本

运行

npm run start

出现一下界面,即为成功:

微前端--无界方案之官网demo操作说明

加入个人项目

创建项目

在examples中创建一个自己的项目(本人用的vue2,所以创建一个vue2的项目,其他类推)

微前端--无界方案之官网demo操作说明

注:主页面项目就是我们所有项目最终运行的地方,相当于main

微前端--无界方案之官网demo操作说明

个人项目--配置路由

初始项目(做实验的)

配置路由,方便一会展示使用,如果个人项目中有vue的脚手架,推荐使用一个简单方法生成一个路由

vue add router

会自动生成一个router.js文件和两个路径模板

完整项目

需要在路由主文件中设置如下

微前端--无界方案之官网demo操作说明
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')
        }
    ]
})

开始关联

在main-vue中,开始个人项目和无界关联起来,在其router.js文件中做如下操作

微前端--无界方案之官网demo操作说明

首先,导入一个页面

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

然后配置路由路径,注意name属性值与之前一致

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

如下图

微前端--无界方案之官网demo操作说明

然后在views文件中加入我们导入的页面

微前端--无界方案之官网demo操作说明

如下图

微前端--无界方案之官网demo操作说明

代码:

<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>

然后在main-vue的hostMap.js文件中添加个人项目的配置,项目地址值是不一样的,不要跟我写的一样,会运行不了

微前端--无界方案之官网demo操作说明

代码:

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;
}

最后,在main-vue中的app.vue上加入router-link语句

微前端--无界方案之官网demo操作说明

项目就会展示出对应的目录

微前端--无界方案之官网demo操作说明

问题:

如果出现跟下图一样的问题,我们的页面并没有加载出来,首先我们个人的项目要运行起来,才可以展示出页面

微前端--无界方案之官网demo操作说明

如果打开控制台,发现一下报错

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

则说明我们没有解决跨域问题

解决办法

给我们的个人项目设置代理,例如vue.config.js文件

/ 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",
    },
};

然后重新运行下我们个人的项目,再次刷新页面,就会出现结果,路由跳转也没有问题文章来源地址https://www.toymoban.com/news/detail-477904.html

微前端--无界方案之官网demo操作说明

到了这里,关于微前端--无界方案之官网demo操作说明的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微前端:无界wujie简单上手

    之前用过了微前端框架 qiankun 并剖析了其原理,今天我们来试试另一个同样厉害的微前端框架无界,本文只是讲如何使用,原理部分后面再更新。 无界支持多种项目的接入,如 react、vue 等 如果你项目是 react、vue 可以直接用 wujie-vue2、wujie-vue3、wujie-react,但是这些也是基于下

    2024年02月11日
    浏览(37)
  • 前端微服务无界实践

    随着项目的发展,前端SPA应用的规模不断加大、业务代码耦合、编译慢,导致日常的维护难度日益增加。同时前端技术的发展迅猛,导致功能扩展吃力,重构成本高,稳定性低。因此前端微服务应运而生。 1.复杂度可控: 业务模块解耦,避免代码过大,保持较低的复杂度,便于维

    2024年02月06日
    浏览(74)
  • 前端微服务无界实践 | 京东云技术团队

    随着项目的发展,前端SPA应用的规模不断加大、业务代码耦合、编译慢,导致日常的维护难度日益增加。同时前端技术的发展迅猛,导致功能扩展吃力,重构成本高,稳定性低。因此前端微服务应运而生。 前端微服务优势 1.复杂度可控: 业务模块解耦,避免代码过大,保持较低

    2024年02月06日
    浏览(46)
  • ElasticSearchHead操作说明

    (76条消息) Elasticsearch-Head(简称Head)-Java文档类资源-CSDN文库 1、下载资源包,解压 2、进入elasticsearch-head-master,执行:npm install  (在这之前需要安装nodejs) 3、输入npm run start命令启动elasticsearch-head 使用补充:本地使用的时候启动一下,服务器上如果安装一个,关闭终端就停止运行

    2023年04月16日
    浏览(48)
  • git 相关操作说明

    下载地址: 下载其中一个安装 2.打开gitee网站,注册账号 3.打开个人中心,选择ssh公钥,查看如何生成公钥 4.生成公钥后,添加相应的公钥 具体仓库操作 1.第一次提交需要配置账号 或者直接通过终端修改 如果是克隆项目指定分支到本地 3.拉取指定分支(更新,记住第一次

    2024年02月05日
    浏览(47)
  • RabbitMQ 管理界面操作说明

    当我们安装好RabbitMQ,并开启了 rabbitmq_management 插件并重启RabbitMQ服务后,我们就可以访问管控台了。 rabbitmq_management 开启后,重启RabbitMQ服务,然后浏览器访问 http://localhost:15672/ 账号:guest 密码:guest 登录进去后: 点击队列名,可以进行消息数量的查看: 消息内容查看: A

    2023年04月17日
    浏览(49)
  • QGIS 3D功能操作说明

    QGIS 可以轻松快速地创建 3D 地图和可视化。 可用于3d数据效果浏览及与2D数据的对比及数据的打印输出。具体功能如下。 1.在 QGIS 中,您可以通过几个简单的步骤创建 3D 模型。      (1)在QGIS中添加3D 数据的数据层,例如DEM,以供3D功能使用。               (2) 打开

    2024年02月17日
    浏览(53)
  • Git —— submodule 操作说明

    这里存在一个较大的坑,默认检出的子模块并不属于任何分支,而是一个 “detached head” ,虽然可以提交更改,但是并没有本地分支跟踪提交的更改,这意味着 下次更新子模块会丢失这些更改 。 因此在对子模块进行开发修改前,请先切换其所属分支和对应的 commit id。 由于

    2024年02月05日
    浏览(61)
  • 无界(wujie)微前端实现及三种通信方式介绍

    之前介绍过前段时间比较流行的微前端框架qiankun,虽然实现了微前端的理念,但是也暴露出很多缺点,比如官网上讲到的四点: 基于路由匹配,无法同时激活多个子应用,也不支持子应用保活 改造成本较大,从 webpack、代码、路由等等都要做一系列的适配 css 沙箱无法绝对的

    2023年04月09日
    浏览(36)
  • C#关于byte的操作说明

    获取byte中每一位的值 获取int16中其中某几位的数值 bit 内容   11-15 预留   10 值7   6-9 值6   5 值5   4 值4   3 值3   2 值2   0-1 值1   public UInt16 ToByte() { UInt16 ret = 0x00; ret = (UInt16)(ret | ((UInt16)Waypoint 9)); ret = (UInt16)(ret | ((UInt16)Side 8)); ret = (UInt16)(ret | ((UInt16)Head 7)); ret = (UInt16)(ret

    2024年02月09日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包