微前端开发(Vue)

$ yarn add qiankun # 或者 npm i qiankun -S

<template> <div class="zibo-custom-web">      <div id="zibo-custom-web" class="app-view-box"></div> </div> </template> <script> export default {}; </script> <style lang="scss" scoped> .zibo-custom-web{   position: relative; } </style>

  <!-- 主体视图层 -->         <div class="avue-view-contain" v-show="!isSearch">           <keep-alive>             <router-view               class="avue-view keep-alive"               v-if="$route.meta.keepAlive && isActiveRoute"               v-show="!showAppVueHash"             />           </keep-alive>           <router-view             class="avue-view"             v-if="!$route.meta.keepAlive && isActiveRoute"             v-show="!showAppVueHash"           />           <AppVueHash v-show="showAppVueHash" />         </div>

import router from "@/router/router"; import store from "@/store"; import AppVueHash from "@/views/AppVueHash.vue"; import { loadMicroApp } from "qiankun"; //子项目路由前缀 const isChildRoute = path => website.childRoute.some(item => path.startsWith(item)); const apps = [   {     name: "/zibo-custom-web",     entry: window.configs.VUE_APP_ZIBO_CUSTOM_URL,     container: "#zibo-custom-web",     props: { data: { store, router } },     sandbox: {       strictStyleIsolation: true // 开启样式隔离     }   } ]; //控制微应用手动加载     ctrlMicroApp(path){        if (isChildRoute(path)) {         this.showAppVueHash = true;         this.$nextTick(() => {           //手动加载           if(!this.mounted){             this.loadApps = apps.map(item => loadMicroApp(item))             this.mounted=true;           }           });       } else {         this.showAppVueHash = false;       }

mounted() {     this.init();     setTheme(this.themeName);     this.ctrlMicroApp(this.$route.path)   },   watch: {     $route(val) {       this.ctrlMicroApp(val.path); },     tagList(newVal,oldVal){       let starts='';       const childRoute = website.childRoute;       childRoute.forEach((n,i)=>{         if(i<childRoute.length-1){           starts+=`^${n}|`;         }else{           starts+=`^${n}`;         }       })       const patt = new RegExp(`${starts}`);       //之前存在子应用页签       const before = oldVal.some(item=>{         return patt.test(item.value);       });       //现在存在子应用页签       const now = newVal.some(item=>{         return patt.test(item.value);       });       if(before && !now){         this.mounted=false;         this.loadApps.forEach(app=>{           app.unmount();           })       }     } 

if (window.__POWERED_BY_QIANKUN__) {     // eslint-disable-next-line no-undef     __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;   }

    <div id="appVueHash"></div>

// -----------子应用微前端start------------------- let router = null; let instance = null;  function render({ data = {} , container } = {}) {   router = new VueRouter({     routes,   });   instance = new Vue({     router,     store,     data(){       return {         parentRouter: data.router,         parentVuex: data.store,       }     },     render: h => h(App),   }).$mount(container ? container.querySelector('#appVueHash') : '#appVueHash'); } if (!window.__POWERED_BY_QIANKUN__) {   render(); } //测试全局变量污染 console.log('window.a',window.a) export async function bootstrap() {   console.log('vue app bootstraped'); } export async function mount(props) {   console.log('props from main framework', props.data);   render(props); } export async function unmount() {   instance.$destroy();   instance.$el.innerHTML = "";   instance = null;   router = null; } // -----------子应用微前端end-------------------

const { name } = require("./package"); module.exports = {   outputDir: "../sass-base-web/cicd-config/test/zibo-custom-web",   devServer: {     port: 9010,     // 关闭主机检查，使微应用可以被 fetch     disableHostCheck: true,     // 配置跨域请求头，解决开发环境的跨域问题     headers: {       "Access-Control-Allow-Origin": "*",     },     proxy: {       "/api": {         //本地服务接口地址         target: "http://192.168.10.112:10067", //cas         ws: true,         pathRewrite: {           "^/api": "/",         },       },     },   },    // 以下配置可以修复一些字体文件加载路径问题   chainWebpack: (config) => {     //忽略的打包文件     config.externals({       vue: "Vue",       "vue-router": "VueRouter",       vuex: "Vuex",       axios: "axios",       "element-ui": "ELEMENT",     });     config       .plugin('html')       .tap(args => {         args[0].name = name;         return args       });     config.module       .rule("fonts")       .test(/.(ttf|otf|eot|woff|woff2)$/)       .use("url-loader")       .loader("url-loader")       .tap((options) => ({ name: "/fonts/[name].[hash:8].[ext]" }))       .end();   },   // 自定义webpack配置   configureWebpack: {     output: {       library: `${name}-[name]`, // 微应用的包名，这里与主应用中注册的微应用名称一致       libraryTarget: "umd", // 把子应用打包成 umd 库格式       jsonpFunction: `webpackJsonp_${name}`, //webpack打包之后保存在window中的key,各个子应用不一致     },   }, };

  outputDir: "../sass-base-web/cicd-config/test/zibo-custom-web",

 const oRouter = {           path: "/zibo-custom-web",           name: "RouterView",           component(resolve) {             require(["@/components/RouterView.vue"], resolve);           },            children: [             {               path: path,               component(resolve) {                 require([`../${component}.vue`], resolve);               },               name: name,               meta: meta,             },           ],         };         aRouter.push(oRouter);

import { initGlobalState, MicroAppStateActions } from 'qiankun'; // 初始化 state const actions: MicroAppStateActions = initGlobalState(state);  actions.onGlobalStateChange((state, prev) => {   // state: 变更后的状态; prev 变更前的状态   console.log(state, prev); }); actions.setGlobalState(state); actions.offGlobalStateChange();

// 从生命周期 mount 中获取通信方法，使用方式和 master 一致 export function mount(props) {     props.onGlobalStateChange((state, prev) => {       // state: 变更后的状态; prev 变更前的状态       console.log(state, prev);     });     props.setGlobalState(state);   }

# 子服务 gitLab 地址 SUB_SERVICE_GIT=('http://192.168.1.102/zouqiongjun/big-data-web.git' 'http://192.168.1.102/zouqiongjun/zibo-custom-web.git') SUB_SERVICE_NAME=('big-data-web' 'zibo-custom-web')  # 子服务 if [ ! -d "sub-service" ]; then   echo '创建sub-service目录...'   mkdir sub-service fi echo '进入sub-service目录...' cd sub-service  # 遍历克隆微服务 for i in ${!SUB_SERVICE_NAME[@]} do   if [ ! -d ${SUB_SERVICE_NAME[$i]} ]; then     echo '克隆微服务项目'${SUB_SERVICE_NAME[$i]}     git clone ${SUB_SERVICE_GIT[$i]}   fi done   echo '脚本结束...' # 克隆完成

{   "name": "sass-big-data-web",   "version": "1.0.0",   "description": "`qiankun`来实现`vue`技术栈的前端微服务",   "main": "index.js",   "scripts": {     "clone:all": "bash ./scripts/clone-all.sh",     "install:zibo": "cd ./sub-service/zibo-custom-web && npm install",     "install:main": "cd ./sub-service/big-data-web && npm install",     "install-all": "npm-run-all install:*",     "start:zibo": "cd ./sub-service/zibo-custom-web && npm run serve ",",     "start:main": "cd ./sub-service/big-data-web && npm run serve",     "start-all": "npm-run-all --parallel start:*",     "serve-all": "npm-run-all --parallel start:*",     "build:zibo": "cd ./sub-service/zibo-custom-web && npm run build",     "build:main": "cd ./sub-service/big-data-web && npm run build",     "build-all": "npm-run-all --parallel build:*"   },   "repository": {     "type": "git",     "url": "http://192.168.1.102/zouqiongjun/sass-big-data-web.git"   },   "keywords": [],   "author": "",   "license": "ISC",   "devDependencies": {     "npm-run-all": "^4.1.5"   } }

    "start:zibo": "cd ../zibo-custom-web && npm run serve ",     "start:main": "cd ../big-data-web && npm run serve",

    "build:zibo": "cd ../zibo-custom-web && npm run build",     "build:control": "cd ../control-center && npm run build",     "build:main": "cd ../big-data-web && npm run build",     "build-all": "npm-run-all --parallel build:*"

 #gzip  on;       upstream gateway { server 192.168.31.136:32067;}      # 主应用         server {         listen   32043;         server_name  web;         root  /dist;         # 关闭端口重定向         # port_in_redirect off;         #charset koi8-r;         access_log /var/log/nginx/nginx.log;          location / {         proxy_set_header Host $http_host;         proxy_set_header X-Real-IP $remote_addr;         proxy_set_header REMOTE-HOST $remote_addr;         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;         }          location ^~/api/ {               proxy_read_timeout 600s;             proxy_set_header Host $host;              proxy_set_header X-Real-IP $remote_addr;              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;             proxy_buffering off;              rewrite ^/api/(.*)$ /$1 break;              proxy_pass http://gateway;              }         }     # 子应用     server {         listen   9010;         server_name  cus_web;         # 子应用编译后的代码路径         root  /zibo-custom-web;           # 允许跨域         add_header Access-Control-Allow-Origin *;         # 关闭端口重定向         # port_in_redirect off;         # charset koi8-r;         access_log /var/log/nginx/nginx.log;         location ^~/zibo-custom-web/ {         proxy_set_header Host $http_host;         proxy_set_header X-Real-IP $remote_addr;         proxy_set_header REMOTE-HOST $remote_addr;         proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;         }          location ^~/api/ {               proxy_read_timeout 600s;             proxy_set_header Host $host;              proxy_set_header X-Real-IP $remote_addr;              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;             proxy_buffering off;              rewrite ^/api/(.*)$ /$1 break;              proxy_pass http://gateway;              }     }

# docker-compose.yml version: '3.1' services:   nginx:     restart: always     image: nginx     container_name: nginx     ports:       - 8888:80       - 8889:8889       - 7100:7100       - 7101:7101     volumes:       - /app/volumes/nginx/nginx.conf:/etc/nginx/nginx.conf       - /app/volumes/nginx/html:/usr/share/nginx/html       - /app/micro/portal:/app/micro/portal       - /app/micro/app1:/app/micro/app1       - /app/micro/app2:/app/micro/app2

# nginx.conf user  nginx; worker_processes  1; error_log  /var/log/nginx/error.log warn; pid        /var/run/nginx.pid;  events {     worker_connections  1024;} http {     include       /etc/nginx/mime.types;     default_type  application/octet-stream;     log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '                       '$status $body_bytes_sent "$http_referer" '                       '"$http_user_agent" "$http_x_forwarded_for"';      access_log  /var/log/nginx/access.log  main;      sendfile        on;     #tcp_nopush     on;     keepalive_timeout  65;      #gzip  on;     include /etc/nginx/conf.d/*.conf;     server {       listen    8889;       server_name 192.168.2.192;       location / {         root /app/micro/portal;         index index.html;         try_files $uri $uri/ /index.html;       }     }     server {       listen    7100;       server_name 192.168.2.192;        # 配置跨域访问，此处是通配符，严格生产环境的话可以指定为主应用 192.168.2.192:8889       add_header Access-Control-Allow-Origin *;       add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';       add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';       location / {         root /app/micro/app1;         index index.html;             try_files $uri $uri/ /index.html;       }     }     server {       listen    7101;       server_name 192.168.2.192;             # 配置跨域访问，此处是通配符，严格生产环境的话可以指定为主应用 192.168.2.192:8889       add_header Access-Control-Allow-Origin *;       add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';       add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';              location / {         root /app/micro/app2;         index index.html;            try_files $uri $uri/ /index.html;       }     }}

(function() {   window.configs = {     VUE_APP_CASLOGINURL: "http://192.168.1.99:32080/cas", //cas登录地址     VUE_APP_REDIRECTURL: "http://192.168.51.61:8888/big-data/", //前端部署地址     VUE_APP_SOCKET: "ws://192.168.31.136:32061", //websocket地址'     VUE_APP_AMAPURLPREFIX: "https://webapi.amap.com", //高德地图地址     VUE_APP_ZIBO_CUSTOM_URL:"http://localhost:9010",//自定义微应用地址     //================================================      VUE_APP_AMAPKEY: "xxxxxx" //高德key   }; })();