微前端 , 上线部署流程记录. 乾坤-qiankunjs

主应用

1. 引入并注册

import { registerMicroApps, start } from 'qiankun'

// 注册微应用
registerMicroApps([
  {
    name: 'thd-psy-web', 
    entry: '/thd-sz-web/child/thd-psy-web/',
    container: '#thd-psy-web',
    activeRule: '/thd-sz-web/thd-psy-web/'
  }
])

　start() // 开启

当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。

2. 路由配置

一般来说建议主应用使用history模式 , qiankun的官方教程也是这样推荐的

// 路由配置 const options = { mode: 'history', base: '/thd-sz-web/', routes: [ { path: '/thd-psy-web/', name: '心理', component: () => import('@/pages/xxx') 　　} 　　] } // 记得在路由页面中留出微应用挂载的DOM节点并且 ID和 container: '#thd-psy-web'中值相同例如

需要注意的是这里的base要与项目的真实访问地址相同例如我的主应用项目地址是 http://192.168.3.92/thd-sz-web/ base就是 '/thd-sz-web/' 这个根据项目自行配置如果直接部署在根目录下,这里base就是'/'

3. webpack 打包相关

  publicPath: /thd-sz-web

根据个人项目情况更改 publicPath

子应用

1. 新建 public-path.js 文件并在main.js中引用

// qiankun Vue子应用配置
if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

2. qiankun相关配置

import './public-path';
import Vue from 'vue';
import VueRouter from 'vue-router';
import App from './App.vue';
import routes from './router';
import store from './store';

Vue.config.productionTip = false;

let router = null;
let instance = null;
function render(props = {}) {
  const { container } = props;
  router = new VueRouter({
    base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
    mode: 'history',
    routes,
  });

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

// 独立运行时
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);
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = '';
  instance = null;
  router = null;
}

router 可以根据自己的项目自行选择挂载方式

3.webpack打包相关这里是Vue-cli中的配置方式

configureWebpack: config => {
    // qiankun start
    config.output.library = `${name}-[name]`
    config.output.libraryTarget = 'umd' // 把微应用打包成 umd 库格式
    config.output.jsonpFunction = `webpackJsonp_${name}`
    // qiankun end
}
// publicPath 地址要与主应用中的 entry真实地址相同

publicPath:'/thd-sz-web/child/thd-psy-web/'

至此打包相关的准备工作做完了,开始部署上线 , 也是其中的难点, 因为本人对nginx配置不是特别了解所以踩了不少坑折腾的几天才弄好. 自己部署上线需要的Nginx有一定的了解简单的Nginx基础配置要会, 简单的命令行要知道, Nginx重启 , Vim编辑等等

部署上线

1. 把打包好的文件放到服务器中nginx 目录下的html 文件夹中


└── thd-sz-web/                     # 根文件夹
    |
    ├── child/                # 存放所有微应用的文件夹
    |   ├── thd-psy-web/         # 存放微应用 vue-hash 的文件夹
    ├── index.html            # 主应用的index.html
    ├── css/                  # 主应用的css文件夹
    ├── js/                   # 主应用的js文件夹

2. 通过xshell等工具连接到服务器找到 nginx.conf 文件并编辑

cd /usr/local/nginx/conf

vim nginx.conf

3 .加入以下配置

root /home/thd/html/thd-sz-web;
index index.html index.html;


　　# 主应用基座
    location / {
        root  /home/thd/html/thd-sz-web;
        try_files $uri $uri/ /index.html last;
        index index.html;
    }
    # 微应用
    location  /thd-sz-web/child/thd-psy-web {
       root  /home/thd/html;
        try_files $uri $uri/ /index.html last;
        index index.html;
    }


　　# 主应用
    location /thd-sz-web {
        root  /home/thd/html;
        try_files $uri $uri/ /index.html last;
     index index.html;
    }
# vue 思政2.0 微应用 解决页面刷新404问题
    location /thd-sz-web/thd-psy-web/  {
        root  /home/thd/html;
        try_files  /thd-sz-web/index.html last;
        index index.html;
    }

至此微应用部署完毕刷新也不会404

其他问题记录

1. 主应用和微应用最好不用选用同一款UI框架主应用会污染子应用的样式 , 有解决方法 . 但是能从根源避免是最好的

以 antd 为例：配置 webpack 修改 less 变量

{
  loader: 'less-loader',
  options: {
    modifyVars: {
      '@ant-prefix': 'main',
    },
    javascriptEnabled: true,
  },
}

配置 antd ConfigProvider

import { ConfigProvider } from 'antd';

export const MyApp = () => (
  
    
  
);

2. 主应用和子应用不能多次使用 babel-polyfill , babel-polyfill 不支持引用多次(主应用和子应用分别引用了一次)，可以改用 idempodent-babel-polyfill

qiankun 框架并不是开箱即用里面有很多坑, 建议使用者多看官方文档加官方群去了解

微前端 , 上线部署流程记录. 乾坤-qiankunjs

相关

标签