主应用
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'中值相同 例如 <div id="thd-psy-web"></div>
需要注意的是这里的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 = () => (
<ConfigProvider prefixCls="main">
<App />
</ConfigProvider>
);
2. 主应用和子应用 不能多次使用 babel-polyfill , babel-polyfill 不支持引用多次(主应用和子应用分别引用了一次)，可以改用 idempodent-babel-polyfill
qiankun 框架并不是开箱即用 里面有很多坑, 建议使用者多看官方文档 加官方群去了解
