微前端开发(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
  };
})();