vue现有项目改造成微服务

nginx配置

// vue 主系统 history 模式配置
location / {
  root /var/static/$environment/axxol-omo-web/prod;
  index index.html;
  if (!-e $request_filename) {
    rewrite ^/(.*) /index.html last;
    break;
  }
}
// 子系统配置入口
location ~/tol-omo-(\w*)
  {
    root /var/static/$environment/tol-omo-$1/prod;
    try_files $uri  $uri/ /tol-omo-$1/index.html;
    add_header Cache-Control no-cache;
  }

子系统中的入口json

prod/tol-omo-promote/importmap.json

{“entry”:“https://q-fe.aixuexi.com/tol/tol-omo-promote/promote-4ce190fe-0407112150.html”}

注：qiankun 通过 fetch 加载子系统的资源，所以静态资源需要支持跨域，@aixuexi/axx-general-upload 的 type 设置为 qiniu

从访问 url 到最终显示出页面的过程

npm 私服插件

1、微前端工具 @aixuexi/tol-web-microfe
http://gitlab.ops.aixuexi.com/axx-general-team/front-end-family/cola-vue/tree/master/packages/TolWebMircofe

2、菜单 @aixuexi/tol-pangu-menu
http://gitlab.ops.aixuexi.com/axx-general-team/front-end-family/cola-vue/tree/master/packages/TolPanguMenu

3、菜单 icon @aixuexi/tol-svg-icon
http://gitlab.ops.aixuexi.com/axx-general-team/front-end-family/cola-vue/tree/master/packages/TolSvgIcon

页面说明
平台技术中心空间 > 增长-基于盘古系统的微前端 > 说明.jpg

vue项目改造成微应用

1、在 main.js 中设置微应用的 publicPath

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

2、vue.config.js 中把微应用打包成 umd 库格式

configureWebpack: {
    resolve: {
      alias: {
        "@": resolve("src")
      }
    },
    output: {
      // 把微应用打包成 umd 库格式
      library: `${SUB_SHORT_NAME}-[name]`,
      libraryTarget: "umd",
      jsonpFunction: `webpackJsonp_${SUB_SHORT_NAME}`
    }
  }

2、静态资源上传文件 pro.upload.js 改为从 使用 @aixuexi/micro-fe-sub 库上传

const microTool = require("@aixuexi/micro-fe-sub");
const constConf = require("./prod.const");
const { SUB_NAME, SUB_SHORT_NAME } = constConf;
microTool({
  rootPath: __dirname,
  subName: SUB_NAME,
  subShorName: SUB_SHORT_NAME
});

3、根目录下新增 prod.const.js 文件，设置微应用相关变量

const SUB_NAME = "tol-omo-trade";
const SUB_SHORT_NAME = "trade";
const STATIC_HOST = `https://q-fe.aixuexi.com/tol/${SUB_NAME}/`;
module.exports = {
  STATIC_HOST,
  SUB_NAME,
  SUB_SHORT_NAME
};

4、路由文件 src/router/index.js 使用 @aixuexi/micro-fe-sub 库生成

import Vue from "vue";
import VueRouter from "vue-router";
import { constantRouterComponents } from "./configMap";
import { routeTree } from "@aixuexi/tol-web-microfe";
Vue.use(VueRouter);
function getRoutes(tree) {
  let routes = [...routeTree(tree, constantRouterComponents)];
  // console.log(routes);
  return routes;
}
export default getRoutes;

5、 main.js 配置

// qiankun publicPath 配置
if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
import Vue from "vue";
import App from "./App.vue";
import getRoutes from "./router";
import store from "./store";
import VueRouter from "vue-router";
import { initQiankunStore } from "@/store/qiankun";
import "@/plugins/index";


let router = null;
let instance = null;

function render(props = {}) {
  const { container, tree } = props;
  router = new VueRouter({
    base: "/",
    mode: "history",
    routes: getRoutes(tree)
  });

  instance = new Vue({
    router,
    store,
    render: h => h(App)
  }).$mount(container ? container.querySelector("#tradeApp") : "#tradeApp");

  // vue-devtools 调试
  if (window.__POWERED_BY_QIANKUN__ && process.env.NODE_ENV === "development") {
    // vue-devtools  加入此处代码即可
    // After you create app
    window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = instance.constructor;
    let instanceDiv = document.createElement("div");
    instanceDiv.__vue__ = instance;
    document.body.appendChild(instanceDiv);
  }
}
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}

export async function bootstrap() {
  console.log("[vue] vue app bootstraped");
}

export async function mount(props) {
  // console.log("[vue] props from main framework", props);
  initQiankunStore(props);
  render(props);
}

export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = "";
  instance = null;
  router = null;
}

本地调试配置（以轩辕系统为例）

host 切到 dev环境，访问 http://lol-omo.aixuexi.com/
1、安装插件
在谷歌市场安装 gooreplacer

2、根据自身业务配置拦截

3、在重定向中开启需要调试的子系统

4、配置：

微应用的main.js 中一定要加上测试环境开启 devTools 的代码

// vue-devtools 调试
  if (window.__POWERED_BY_QIANKUN__ && process.env.NODE_ENV === "development") {
    // vue-devtools  加入此处代码即可
    // After you create app
    window.__VUE_DEVTOOLS_GLOBAL_HOOK__.Vue = instance.constructor;
    let instanceDiv = document.createElement("div");
    instanceDiv.__vue__ = instance;
    document.body.appendChild(instanceDiv);
  }

微应用的 devTools 中开启开启 hot、disableHostCheck

devServer: {
    hot: true,
    disableHostCheck: true,
    port,
    overlay: {
      warnings: false,
      errors: true
    },
    headers: {
      "Access-Control-Allow-Origin": "*"
    },
	...
}