微前端 , 上线部署流程记录. 乾坤-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/'
}
])
当微应用信息注册完之后，一旦浏览器的 url 发生变化，便会自动触发 qiankun 的匹配逻辑，所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中，同时依次调用微应用暴露出的生命周期钩子。
2. 路由配置
一般来说建议主应用使用history模式 , qiankun的官方教程也是这样推荐的
需要注意的是这里的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真实地址相同
至此打包相关的准备工作做完了,开始部署上线 , 也是其中的难点, 因为本人对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 = () => (
<ConfigProvider prefixCls="main">
<App />
</ConfigProvider>
);
2. 主应用和子应用 不能多次使用 babel-polyfill , babel-polyfill 不支持引用多次(主应用和子应用分别引用了一次)，可以改用 idempodent-babel-polyfill
qiankun 框架并不是开箱即用 里面有很多坑, 建议使用者多看官方文档 加官方群去了解
