精华内容
下载资源
问答
  • vue简易微前端项目搭建(一):项目背景及简介
    千次阅读
    2020-07-16 11:43:17

    github传送门:
    1、h5主项目
    2、项目脚手架
    3、子项目模板

    系列文章传送门:
    vue简易微前端项目搭建(一):项目背景及简介
    vue简易微前端项目搭建(二):子项目模板及项目脚手架搭建
    vue简易微前端项目搭建(三):webpack相关配置


    最近有空,准备写个系列教程,把公司目前在用的h5项目从搭建到实践优化的一些心得和经验记录一下,技术栈是vue2.x的,马上3.0正式版就要出了,再不写就要过时啦哈哈。

    1、项目需求

    我司h5主要做移动端,运行在app和小程序里,也就是hybrid app混合开发模式。

    刚来公司时,公司h5才刚开始起步,同事只开发了三个h5需求,这三个需求在业务功能上都是相互独立的,所以也分开放在了三个spa项目里。。。想一想,以后开发类似需求越来越多,页面功能比较分散,大多都是相对独立的模块,难道要写n个项目吗,所以有必要设计一个多项目聚合方案。

    2、关于微前端

    我感觉今年随着qiankun2.0的发布,微前端概念突然火了很多,我记得去年也就是19年的时候还没那么火呢,不过确实是未来前端发展的一个方向。

    在前公司的时候,有配合过后端做过微服务迁移的过程,对后端的微服务有一定的了解,后端一般是把接口划分为一些模块,每个模块就是一个微服务粒度,比如user、goods,每个模块都可以单独启动、单独修改发布。

    而微前端也是借鉴后端的微服务化,把前端根据功能划分成几个相对独立的子项目,可以单独编译发布。

    关于技术栈无关,个人认为对微前端来说是很有用的,但不是必需的,技术栈无关适用于把已有的几个老项目整合一起组成微前端,而如果是在微前端项目的立项搭建时就显得没那么重要了,因为搭建项目时选择统一的技术栈无论是开发维护还是代码复用都更方便且实际。

    微前端也是前端技术发展过程中借鉴微服务后慢慢形成的一种架构思想,架构本身就是服务于业务而千变万化的,所以不必咬文嚼字去定义微前端必须具备哪些点。

    本项目,只适用于vue技术栈,可以说是简易的微前端项目,也可以说是基于vue的多项目聚合方案。

    3、关于本项目架构思路

    技术栈选择呢,由于之前已做需求都是vue写的,也对vue相对更加熟悉,所以就选定vue作为基础框架,也便于项目搭建完成后把之前项目迁移进来,也是借鉴了前公司的方式。

    整体上是基于vue-cli4生成的项目进行改造搭建,根据业务划分为多个不同的子项目,

    (1)目录结构:

      ├── build                             // webpack相关配置
      ├── src                               // 核心源代码
      │   ├── projects                      // 存储所有子项目
      │   │   ├── demo                      // 子项目目录名
      │   │   │   ├── components            // 子项目公共组件
      │   │   │   ├── static                // 不打包的js目录
      │   │   │   ├── store                 // vuex存储
      │   │   │   ├── utils                 // 公共js
      │   │   │   │   ├── importVant.js     // vant按需引入
      │   │   │   │   └── routerGuards.js   // 路由导航守卫
      │   │   │   ├── views                 // 页面源码
      │   │   │   ├── config.js             // 子项目配置文件
      │   │   │   └── main.js               // 子项目入口文件
      │   │   └── ......                    // 其他子项目
      │   ├── resources                     // 存储全局公共资源
      │   │   ├── assets                    // 全局公共图片等
      │   │   ├── components                // 全局公共组件
      │   │   ├── mixins                    // 全局mixins混入
      │   │   ├── styles                    // 全局公共样式
      │   │   ├── native                    // 原生客户端交互封装
      │   │   │   ├── callNative.js         // 调用客户端方法
      │   │   │   ├── openNative.js         // 跳转客户端页面
      │   │   │   ├── regNative.js          // 注册js方法给客户端
      │   │   ├── utils                     // 全局公共js
      │   │   │   ├── flexible.js           // rem适配
      │   │   │   ├── globalGuards.js       // 全局路由导航守卫公共方法
      │   │   │   ├── polyfill.js           // 手动添加的polyfill降级方法
      │   │   │   └── request               // 全局接口请求相关
      ├── .env                              // 全局环境配置
      ├── .env.beta                         // beta环境配置
      ├── .env.dev                          // 本地环境配置
      ├── .env.prod                         // 线上环境配置
      ├── .env.test                         // test环境配置
    

    (2)简述:

    • src目录包含projects和resources两个文件夹:
    • resources存放公共资源文件,
    • projects存放所有子项目,里面每个文件夹就是一个子项目,每个子项目相互独立,可以单独运行及打包。
    • 部署到线上时,也是每个子项目隶属于不同的目录路径,例如子项目a是https://test.com/a/index.html,子项目b是https://test.com/b/index.html。

    这样,不同的业务需求可以通过创建不同的子项目来开发,resources里有公共资源方法可以共用,例如公共样式、公共方法、客户端交互等等。

    (3)优势:

    • 1、利于多人多项目并行开发。在业务需求繁多、开发人员较多的时候,很多需求就需要并行开发,一个需求分配几个开发人员组成一个临时项目组,并行独立进行开发和上线,这样就可以通过在不同的子项目下开发而互不影响,同时也能方便使用公共资源和组件,保证并行开发的效率。
    • 2、利于发布上线时的风险分散。子项目可以单独发布,即使代码修改有严重bug,发布后也只会影响这次发布的子项目,未发布的也就是之前已通过测试上线的可以照常运行。
    • 3、提升页面访问速度和开发构建速度。相比于一整个大项目的方式,单个子项目使用webpack启动和构建的速度肯定更快;而且单个子项目使用的依赖包更少,意味着打包后的js文件更小,页面初次访问速度就会更快。当然,在不同子项目页面之间来回访问的速度相对会慢不少,但由于此hybrid h5项目的特殊性,绝大多数需求模块相对独立,互相跳转的场景很少,合理的划分子项目即可,而且hybrid h5里很多场景下新开一个webview打开页面的体验更好,这样还是得重新加载页面。

    (4)对比MPA

    • 这里说的MPA是指单页面spa和传统多个html形式混合后的一种方式,在webpack的entry里配置多个入口实现,在项目启动和打包时都是一起构建的。
    • 这种方式对比上述的三点优势,其实就只是第3点的提升页面访问速度算是一致,其他优势点都不具备。
    • 个人理解MPA的主要应用场景是提升首屏访问速度。即把首屏页面单独划分出来,这样首屏部分打包后的js等代码就少很多,访问速度自然有所提升,特别是其他页面引入了很多第三方依赖的情况。而页面的懒加载只是路由的懒加载,未配置chunk分离的依赖打包后仍然会在初始页面里加载,没有MPA方式解决的更彻底。

    4、项目配套

    由于项目的运行及打包需要指定选择一个子项目,子项目会随着业务的发展越来越多,不可能都在package.json的script里写上固定的命令吧,为了提高命令使用效率,就做了个配套的脚手架工具,使用nodejs编写,主要用于创建子项目、子项目启动、打包等命令,可以自定义输入命令来指定子项目名和服务端环境。

    同时也创建了个子项目模板,便于快速生成一个子项目,以及做子项目使用引导。

    github地址见文章开头,业务相关代码已做清理。

    5、子项目划分

    这个就见仁见智了,具体还是根据公司业务需要来考虑,不用分太多,不然子项目太多管理也不方便,路由懒加载下其实一个子项目里多放些页面也没关系。

    • 比如一些简单的独立的页面(例如用户协议、app下载页什么的)可以都放到一个子项目里
    • 再比如一些有时效性的活动页也可以放到一起,比如中秋活动页、双十一活动页什么的,也可以按年份归纳,比如命名activity2020,2020年的活动页都放这里。
    更多相关内容
  • 前端微服务化一直是前端社区的一个热门话题,早在2018年就有不少开发者提出过各种解决方案。或许是未得精髓,个人认为基于Web Components的实现脱离整体打包逻辑的,难以工程化。直到遇到了vue-cli 3,子模块打包的...
  • angluar6+vue微前端demo

    2020-11-24 22:57:03
    微前端架构具备以下几个核心价值: 技术栈无关 主框架不限制接入应用的技术栈,子应用具备完全自主权 独立开发、独立部署 子应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新 独立运行时 每个子...
  • 上一篇文章中我们分享了qiankun的一些概念和特性,以及基于qiankun实现有一个微前端应用的大概步骤,最后以qiankun加vue2.0为例给出了快速搭建qiankun微前端的一些核心代码。那么接下来将基于前面文章的操作步骤及...

    前言

    小伙伴们大家好。上一篇文章中我们分享了qiankun的一些概念和特性,以及基于qiankun实现有一个微前端应用的大概步骤,最后以qiankun加vue2.0为例给出了快速搭建qiankun微前端的一些核心代码。那么接下来将基于前面文章的操作步骤及核心代码,从零开始实现一个简单而又完整的qiankun微前端项目。此项目中仍以vue2.0为主进行项目构建。话不多说,我们马上开始。

    主应用

    • 利用vue脚手架创建一个vue2.0项目:qiankun-main(vue create qiankun-main),建议选择手动模式可以将Router勾选上,并且需要使用history路由模式
    • 打开项目qiankun-main,安装qiankun(npm install qiankun --save
    • 修改App.vue,新增一个VueChild的router-link,to值为“/vueChild”,并在router-view的下方新增一个id为vueContainer的div盒子(用于承载子应用)
    • 修改views/Home.vue,将默认内容删除,并改为: This is a home page in qiankun-main(非必须,可根据自己喜好随便改动,也可使用默认内容)
    • 修改views/About.vue,将内容改为:This is an about page in qiankun-main(非必须,可根据自己喜好随便改动,也可使用默认内容)
    • 修改main.js,导入qiankun中的registerMicroApps和start两个方法,注册子应用并启动qiankun

    下面看下修改后的完整代码(创建项目和安装qiankun的步骤就省略了)

    <!-- App.vue -->
    <template>
    	<div id="app">
    		<div id="nav">
    			<router-link to="/">Home</router-link> |
    			<router-link to="/about">About</router-link> |
    			<router-link to="/vueChild">VueChild</router-link> | <!--新增部分-->
    		</div>
    		<router-view />
    		<div id="vueContainer"></div><!--新增部分,用于承载子应用-->
    	</div>
    </template>
    
    <!-- views/Home.vue -->
    <template>
    	<div class="home">This is a home page in qiankun-main</div>
    </template>
    
    <!-- views/About.vue -->
    <template>
    	<div class="home">This is an about page in qiankun-main</div>
    </template>
    
    // main.js
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    //======================新增内容开始===============================
    import {registerMicroApps, start} from 'qiankun' //新增部分,导入qiankun中的两个方法
    const apps = [
    {
    	name:'qiankun-child', //子应用的名称
    	entry:'//localhost:8082',//子应用的域名
    	container:'#vueContainer',//承载子应用的容器,在上面App.vue中定义
    	activeRule:'/vueChild', // 被激活的子应用的路由
    }
    ]
    registerMicroApps(apps);//注册子应用
    start();//启动qiankun
    //======================新增内容结束===============================
    new Vue({
    	router,
    	render: h => h(App)
    }).$mount('#app');
    
    // router/index.js
    //...省略原有不需修改的代码,以下是修改后的代码
    const router = new VueRouter({
    	mode:'history',
    	base: '',
    	routes
    })
    

    微应用

    微应用中主要需要修改的地方有三个文件:main.js、vue.config.js和router/index.js,其余页面部分根据自己喜好可改可不改,本文为了便于区分主子应用的内容将对Home.vue和About.vue页面进行微小的改动

    • 利用vue脚手架创建一个vue2.0项目:qiankun-child(vue create qiagainkun-child),建议选择手动模式可以将Router勾选上,并且需要使用history路由模式
    • 修改views/Home.vue,在原有内容的基础上新增语句:“This is a home page in qiankun-child”(根据个人喜好,可改可不改)
    • 修改views/About.vue,将内容改为:“This is an about page in qiankun-child”(根据个人喜好,可改可不改)
    • 修改main.js(必需)
      • 将创建Vue实例的代码部分提取到一个函数render中,render函数接收一个参数props
      • 判断window.__ POWERED_BY_QIANKUN __,如果是从qiankun启动则将window. __ INJECTED_PUBLIC_PATH_BY_QIANKUN __ 的值赋值给 __ webpack_public_path __ ,否则直接调用render方法表示子应用是独立运行
      • 导出3个必需的方法bootstrap,mount和unmount;bootstrap函数体内容可为空但函数必须要导出。mount函数中调用render方法进行子应用渲染。unmount函数中将render方法中创建的vue实例销毁。
    • 修改router/index.js,指定base值为:“/vueChild”
    • 创建vue.config.js,在该文件中配置允许跨域:“ Access-Control-Allow-Origin:’*’ ”,并配置webpack的output.library和output.libraryTarget

    各部分完整代码如下:、

    <!--======================== views/Home.vue ====================-->
    <template>
    	<div class="home">
    		<img alt="Vue logo" src="../assets/logo.png" />
    		<h1 style="color:red;">This is a home page in qiankun-child</h1>
    		<HelloWorld msg="Welcome to Your Vue.js App" />
    	</div>
    </template>
    
    <!--======================== views/About.vue ====================-->
    <template>
    	<div class="About">		
    		This is an about page in qiankun-child
    	</div>
    </template>
    
    // main.js
    import Vue from 'vue'
    import App from './App.vue'
    import router from './router'
    
    let instance = null; //设置全局变量,用于保存或销毁Vue实例
    function render(props){
    	const { container } = props;
    	instance = new Vue({
    		router,
    		render: h => h(App)
    	}).$mount(container ? container.querySelector("#app") : "#app");//用于限定当前上下文下的#app,防止与主应用中的#app冲突
    }
    
    if(window.__POWERED_BY_QIANKUN__){
    	__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
    }else{
    	render();
    	console.log('子应用独立运行')
    }
    
    export async function bootstrap(props){
    	console.log('这里暂时可以什么都不用做,但方法必须要导出')
    }
    
    export async function mount(props){
    	render(props);//从qiankun启动
    }
    
    export async function unmount(props){
    	instance.$destroy();//销毁子应用实例
    }
    
    //vue.config.js
    module.exports = {
    	devServer:{
    		port:8082,
    		headers:{
    			"Access-Control-Allow-Origin": "*"
    		}
    	},
    	configureWebpack:{
    		output:{
    			library:'qiankun-child',
    			libraryTarget:'umd'
    		}
    	}
    }
    
    // router/index.js
    // ...原有代码省略
    //修改后的代码
    const router = new VueRouter({
    	mode:'history',
    	base:'/vueChild',
    	routes
    });
    

    启动应用

    以上就是主应用和子应用的完整代码了,代码实现了下面我们就把它运行起来看一下实现效果。
    分别在主应用qiankun-main和子应用qiankun-child的terminal中运行npm run serve来启动两个应用,然后分别打开2个链接地址,我们发现:主应用中除本身自有内容外,还可以通过点击VueChild链接把子应用中的内容也加载过来。而打开子应用的链接同样子应用也能够独立运行不受影响。这就是微前端的魅力所在。

    • 子应用独立运行图
      在这里插入图片描述
    • qiankun主应用运行图
      在这里插入图片描述
      在这里插入图片描述
    • 主应用中接入子应用
      在这里插入图片描述

    总结

    本文我们以qiankun加vue2.0为例,从零开始一步步搭建了一个简单的微前端应用,相信前面说的那些特点通过本次的实践,小伙伴们也应该都感受到了。不知道有没有小伙伴发现,本次的实践我们用的都是vue技术栈并且路由是history模式的,那么如果想换成hash模式如何实现呢,另外如何还想接入其它技术栈(如react)又该如何接入呢?我们下篇将继续为大家分享。本篇文章就分享到这里了。

    喜欢的小伙伴欢迎点赞关注加评论哦!

    展开全文
  • 1.此实例包含有一个`qiankun-main`主应用和`qiankun-vue-child`子应用。【可以包含若干个子应用,这里只建立一个vue子应用进行演示】 2.主应用跨域访问子应用系统。 3.无node_modules,执行npm install即可。 更新...
  • 微前端发布vue 微前端 用nginx 发布流程总结(qiankun)什么是微前端一、vue微前端主应用配置地址二、vue微前端微应用配置注意事项三、nginx配置 微服务appone四、nginx配置 主应用配置五、nginx 打包后如下放置总结...

    vue 微前端 用nginx 发布流程总结(qiankun)


    什么是微前端

    微前端架构具备以下几个核心价值:

    1、技术栈无关
    主框架不限制接入应用的技术栈,微应用具备完全自主权

    2、独立开发、独立部署
    微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新

    3、增量升级
    在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略

    4、独立运行时
    每个微应用之间状态隔离,运行时状态不共享


    一、vue微前端主应用配置地址

    vue微前端配置地址:

     name: 'appone',//微应用名字
     entry: '//127.0.0.1:1800/appone/', // 微前端访问地址
     container: '#appone-container', // 挂载的主应用ID
     activeRule: '#/appone/app' // 微前端匹配的公共路由地址
    

    二、vue微前端微应用配置注意事项

    vue微前端微应用配置注意事项:
    提示:需要改vue.config.js vue的配置文件

    module.exports = {
        publicPath: 'appone' // 需要添加publicPath  否则微应用 index.html 里面的 js/css 路径不会带上 /app1/
    }
    

    三、nginx配置 微服务appone

    微服务appone appone.conf:

    server {
            listen       1810;
            server_name  127.0.0.1;
    
            index  index.html index.htm;
    
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
             location / {
                 root   /opt/www/appone;
                 index  index.html;
            }
    
            location /api/ {
                proxy_pass      http://127.0.0.1:9020/v2.0/;
                proxy_set_header        Host    host;
                proxy_set_header x-forwarded-for $remote_addr;
            }
    }
    
    

    四、nginx配置 主应用配置

    微服务appone app.conf:

    server {
            listen       1800;
            server_name  127.0.0.1;
    
            index  index.html index.htm;
    
            error_page   500 502 503 504  /50x.html;
            location = /50x.html {
                root   html;
            }
             location / {
                root   /opt/www/app;
                index  index.html;
                try_files $uri $uri/ /index.html;
            }
    
            location /appone/ {
               proxy_pass http://127.0.0.1:1810/;
               proxy_set_header Host $host:$server_port;
           }
    
    
            location /api/ {
                proxy_pass      http://127.0.0.1:9020/v2.0/;
                proxy_set_header        Host    host;
                proxy_set_header x-forwarded-for $remote_addr;
            }
    }
    
    

    五、nginx 打包后如下放置

    微应用(appone)主应用(app),打包后如下放置:

    └── /opt/www/                     # 根文件夹
        |
        ├── app/                # 存放所有主应用的文件夹
        |   ├── css/         
        |   ├── fonts/      
        |   ├── img/        
        |   ├── js/     
        |   ├── static/     
        |   ├── index.html   
        ├── appone/            # 存放appone微应用的文件夹
        |   ├── appone/    # 存放appone微应用独立访问的文件夹
        |   |   ├── css/         
        |   |   ├── fonts/      
        |   |   ├── img/        
        |   |   ├── js/     
        |   |   ├── static/     
        |   |   ├── index.html 
        |   ├── css/         
        |   ├── fonts/      
        |   ├── img/        
        |   ├── js/     
        |   ├── static/     
        |   ├── index.html 
    
    

    总结

    提示:微前端访问地址:

    微前端主应用访问地址: http://127.0.0.1:1800/
    微前端微应用访问独立访问地址:http://127.0.0.1:1800/appone/

    展开全文
  • 基于Vue实现微前端

    千次阅读 2020-04-19 20:52:53
    前端微服务化一直是前端社区的一个热门话题,早在2018年就有不少开发者提出过各种解决方案。或许是未得精髓,个人认为基于Web Components的实现脱离整体打包逻辑的,难以工程化。直到遇到了vue-cli 3,子模块打包的...

       前端微服务化一直是前端社区的一个热门话题,早在2018年就有不少开发者提出过各种解决方案。或许是未得精髓,个人认为基于Web Components的实现脱离整体打包逻辑的,难以工程化。直到遇到了vue-cli 3,子模块打包的问题得以迎刃而解。2019年秋,团队内部初步实现前端分布式开发,解决了集中式开发部署的“老大难”问题。个人认为,随着WebAssembly等技术的兴起,“前端后移”越来越明显,前端微服务会成为大前端的一个趋势。下面简单分享下本人对前端微服务的一些拙见。

    前言

       目前的前端技术,大部分是基于JavaScript栈极其衍生的技术栈体系。从当年被人戏称为“玩具语言”发展到今天,JavaScript的经历可谓命途多舛。早期缺少必要的规范,让JavaScript的生态自由的有点泛滥。本就是解析型语言,还多重标准,谁也不能预测下一行代码会产生什么结果。随着Node.js的到来,“前端后移”历史的车轮开始转动了。前端的打包不再是简单地混淆压缩一下,出现了import/export模块的概念,后端工程师嗅到了熟悉的味道。W3C的ES2015标准,前端模块化开始深入人心,Webpack逐渐成了前端开发的事实标准,TpyeScript等强类型衍生语言也开始出现,大前端圈空前繁荣。随着大量了后端语言(特别是Java这类面向对象语言)的标准加入,前端开发终于从Web开发中脱离出来自立门户。前端工程化伴随着“前后端分离”的潮流,席卷了整个互联网。GitHub等开源社区上前端项目如雨后春笋般涌现。

    痛点

       前端工程化固然是好事,但前端项目一多就存在难以整合的问题。特别是前端技术栈不一致的情况下,React团队开发的小功能不能被Vue团队复用。前端工程也期待能拥有后端的远程调用RPC接口。通过调用前端RPC接口就能跨平台渲染。这就好比是JVM平台都能解析class字节码一样方便。目前整合不同系统的方案大部分是使用iframe简单嵌套,不优雅但能用。谷歌提出的WebAssembly可能是不错的方案,但离商用太远。

    方案

    目前如何有效整合前端应用呢?综合考虑了新老系统的特点,大致分了三种情况。
    在这里插入图片描述

    关键代码如下:

    <div class="puzzle-box">
      <div class="puzzle-item" v-for="puzzle in puzzles" :key="puzzle.id" :style="'height:' + puzzle.height + ';width:' + puzzle.width">
        <div v-if="puzzle.type === 'iframe'">
          <iframe :src="puzzle.src" :style="'width:100%;height:' + puzzle.height "></iframe>
        </div>
        <div v-if="puzzle.type === 'module'">
          <puzzle-module v-bind:url="puzzle.url"></puzzle-module>
        </div>
        <div v-if="puzzle.type === 'native'">
          <div v-append="puzzle.content" :style="'width:100%;height:' + puzzle.height"></div>
        </div>
      </div>
    </div>
    <script>
        const content=`<h1>前端开发迭代计划</h1><table class="table table-bordered table-striped table-hover"><tr><th>序号</th><th>需求</th><th>优先级</th><th>负责人</th><th>计划完成日期</th></tr><tr><td>1</td><td>大数据的自助分析平台</td><td>高</td><td>工程师A</td><td>2020-04-08</td></tr><tr><td>2</td><td>自定义模板、调用时传入XML,引擎生成报表结果</td><td>高</td><td>工程师A</td><td>2020-04-08</td></tr></table>`
        const puzzles = [
            { id: 1, type: 'module', url: 'http://localhost:9081/list.js',width: '100%',height: '400px'},
            { id: 2, type: 'native', content: content, width: '50%', height: '400px'},
            { id: 3, type: 'iframe', src: 'http://cn.bing.com/',width: '50%',height: '400px'},
        ]
    </script>
    

    iframe嵌入

    iframe嵌入是是目前大多数人使用的方式,基本没有开发量。

    原生html嵌入

    这种方式外部接口提供html文本,本地系统划一块地方出来给你自己渲染,如划一个600x800的div用来渲染报表。使用vue-append作为渲染组件。这种方式可以摆脱iframe,自由度也比较大。缺点是不容易实现规范化,有点像内嵌的广告页面。

    模块化嵌入

    使用模块打包的概念,通过webpack将子模块各个分拆独立打包成模块再通过静态文件方式加载到外部系统做展现。这也是目前团队内部使用的方案。通过遍历模块目录(一般就是业务vue页面)批量生成配置文件。

    
        .......
    
        function readDirectory(directory) {
          fs.readdirSync(directory).forEach((file) => {
            const fullPath = path.resolve(directory, file);
            if (fs.statSync(fullPath).isDirectory()) {
              if (scanSubDirectories) readDirectory(fullPath);
              return;
            }
            if (!regularExpression.test(fullPath)) return;
            //files[directory.substring(directory.lastIndexOf(path.sep))+ path.sep +file] = fullPath
            files[directory.substring(parentPath.length+1)+ path.sep +file] = fullPath
            //console.log(files)
          });
        }
    
        .......
    
    

    最终就会按模块输出打包好的js文件,发布是可以实现按需集成。
    在这里插入图片描述

    by jack.mark

    展开全文
  • Vue搭建微前端

    2021-02-04 09:19:22
    最近公司来了个项目,运行起来后,控制台报错,说是找不到“XXXXX”模块,让检查...接下来,微前端搭建摸索正式开启: 首先放上官网文档地址、配置文件生成说明 一、涉及技术及框架 single-spa:连接主项目与子.
  • 一、一套微前端框架通常包含四个部分:3.主应用4.子应用这里重点介绍一下,主应用,子应用的搭建过程,首先通过vue-cli创建2个vue应用,vue_main主应用,vue_child子应用二、修改主应用vue_main修改index.html,在...
  • 微前端在美团外卖的实践,感觉和笔者所在团队实践了一年多的微前端方案非常类似,只不过我们是基于 Vue 技术栈的,所以也想总结一篇文章分享给大家。因为笔者文笔不算太好,其中借用了一些美团文章的一些总结性的...
  • 微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。 如何使用qiankun搭建基于vue微前端
  • 微前端主应用与子应用如何构建 构建主应用 使用 vue-cli 创建主应用 npm install qiankun 下载微前端方案依赖 改造主项目 改造 main.js // 在和main.js统计目录新建application.js,然后在main.js...
  • Vue 微前端解决方案 学习预加载路由项目有感尝试自己搭建前端已知路由配置情况下的 Vue 微前端解决方案。 SDK Version 目标 子项目支持单独开发,单独部署;因此可以多人同时开发子项目再进行合并部署。 单一的入口 ...
  • 主应用 UmiJS , 子应用同时支持 Umi , Vue2.x , Vue3.x(不稳定) demo示例 https://github.com/ldinger/umi-qiankun-vue-demo.git 说明 :本例是参考 umi-plugin-qiankun 添加了vue 子应用 。 applications 为所有...
  • 微前端 什么是微前端? 在讲解微前端之前先给大家看个示例(https://www.ucloud.cn/): UCloud是一个云计算服务平台,是比较典型的中后台应用,像这种应用往往面临着当业务发展之后,由刚刚开始的单体应用进化成巨石...
  • 我们知道微前端父子通信方式有很多, 例如 location、Cookie、LocalStorage、window, 但是他们都有一个通病, 即无法实时监测变化, 例如换肤或者多语言切换, 想要应用到子项目, 必须进行页面的刷新, 然后才能通知到, ...
  • 公司要求开发微前端,类似于一个主应用其他子应用嵌入到主应用页面,且独立开发 按照主应用打包规则进行打包,适配主应用,但是现在我子应用的样式element文件被主应用的ivew样式覆盖了,导致我所有的样式都不生效 ...
  • 它是基于Vue SSR的渲染库。 它提供了四种渲染模式: ssr-html , ssr-json , csr-html和csr-json 。 HTML渲染模式,可以提高第一屏的渲染速度,并且更加SEO友好。 JSON渲染模式可用于Vue , EJS , React等,...
  • 上篇文章我们分享了如何使用qiankun+vue2.0实现一个简单的微前端应用。在文章的最后还提到:在实现的微前端应用中,所用到的路由模式都是以history模式为基础进行路由配置的,如果按照当前的配置一旦改成hash模式,...
  • github传送门: 1、h5主项目 2、项目脚手架 3、子项目模板 系列文章传送门: 1、子项目模板 子项目模板就是用于快速创建一个配套的子项目,也就是在主项目目录/src/projects/...基本上就是遵从vue项目src目录大致结构。
  • //注册微前端1 singleSpa.registerApplication( 'app1', async () => { // 加载子应用产物 app.js(文件名称在子应用打包配置中会提到) // ip:port 为子应用dev的ip和port await runScript('...
  • 运行demo ...微前端项目是由多个子项目组成的,所以需要在微前端项目中声明这个项目是由哪些子项目组成的,这个步骤称为子项目注册。子项目注册做的事情是:给这个项目命名,指定这个项目在什么情况下装
  • vue-module-loader 分支支持 Vue3,并已进入候选测试阶段,欢迎验证。 vue-module-loader 是一个 Vue 插件,让你使用类似于的架构开发 Vue 应用。 Let you use the micro front-end architecture to build Vue ...
  • vue简易微前端项目搭建(三):webpack相关配置
  • 使用React,Vue和Single-spa构建微前端(Micro Frontends)
  • 微前端其实就是:一个完整应用划分成一个主应用和一个或多个微应用,应用间相互独立,可相互通信。 qiankun的官方文档:https://qiankun.umijs.org/zh/api 当主应用是 hash 模式时,一般微应用也是 hash 模式。主...
  • 本项目采用 vue + qiankun 实践微前端落地。 同时qiankun是一个开放式微前端架构,支持当前三大前端框架甚至jq等其他项目无缝接入。 项目启动 npm run cinit npm run init 下载依赖,因为是批量下载所有应用下的依赖...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 10,797
精华内容 4,318
关键字:

vue微前端