关于最近写的微前端，记录，仅作记录
安装版本
js
复制代码
"vue": "^3.0.0",
"@vue/cli-service": "~4.5.15",
"vue-router": "^4.0.0-0",
"qiankun": "^2.6.3",//只有主应用需要引入
准备
-
两个项目
主应用（基座）：
vue create my-test-qiankun微应用：
vue create my-test-vue3
更改主应用my-test-qiankun
- src文件夹下新增modules文件夹，在modules文件夹下添加
apps.js和index.js - apps.js里统一存微应用信息，其中属性信息要与之后微应用的内容相挂钩
js
复制代码
// apps.js统一存放微应用信息
const apps: any[] = [
{
name: 'anyin-center-base',
entry: '//localhost:3001',
container: '#micro-app',
activeRule: '/base',//这个名字要和子的名字开头一样
},
]
export default apps;
- index.js里注册微应用并抛出启动函数
// src/modules/index.ts
import {
registerMicroApps,
addGlobalUncaughtErrorHandler,
start,
} from 'qiankun';
// 微应用的信息
import apps from "./apps";
/**
* 注册微应用
* 第一个参数 - 微应用的注册信息
* 第二个参数 - 全局生命周期钩子
*/
registerMicroApps(apps, {
// qiankun 生命周期钩子 - 微应用加载前
beforeLoad: (app: any) => {
// 加载微应用前，加载进度条
console.log('before load', app.name);
return Promise.resolve();
},
// qiankun 生命周期钩子 - 微应用挂载后
afterMount: (app: any) => {
// 加载微应用前，进度条加载完成
console.log('after mount', app.name);
return Promise.resolve();
},
});
/**
* 添加全局的未捕获异常处理器
*/
addGlobalUncaughtErrorHandler((event: Event | string) => {
console.error(event);
});
// 导出 qiankun 的启动函数
export default start;
- App.vue里添加router-view，
id="frame"将会是微应用的根节点
js
复制代码
<template>
<div id="main__application--title">这是主项目基座（主应用）</div>
<router-view />
<router-view>
<div id="micro-app"></div>
</router-view>
</template>
- main.js 引入start并执行
js
复制代码
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import start from "./modules";
start();
createApp(App).use(store).use(router).mount("#app");
6.router/index.ts
import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router';
// 创建路由
const router = createRouter({
history: createWebHistory(),//要使用 history 模式，不然没有效果
routes: constantRoutes as RouteRecordRaw[],
// 刷新时，滚动条位置还原
scrollBehavior: () => ({ left: 0, top: 0 })
});
更改微应用my-test-vue3
安装vite-plugin-qiankun
css
复制代码
npm i vite-plugin-qiankun --save-dev
修改vite.config.js
复制代码
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import qiankun from 'vite-plugin-qiankun'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
qiankun('app-vue3', {
useDevMode: true
})
],
server: {
port: 7001,
headers: {
'Access-Control-Allow-Origin': '*'
}
}
})
由于路由模式为history，需要匹配子应用的入口规则，修改src/router/index
javascript
复制代码
import {
createRouter,
createWebHistory
} from 'vue-router'
import routes from './routes'
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
const router = createRouter({
history: createWebHistory( qiankunWindow.__POWERED_BY_QIANKUN__ ? "/base/" : "/"),
routes
})
export default router
最后在main.ts里添加生命周期
javascript
复制代码
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import {
renderWithQiankun,
qiankunWindow
} from 'vite-plugin-qiankun/dist/helper'
let app:any
const render = (container:any='') => {
console.warn('render')
app = createApp(App)
Object.keys(directive).forEach(key => {
app.directive(key, (directive as { [key: string]: Directive })[key]);
});
app.config.globalProperties.$getDictionaries = getDictionaries;
// 全局挂载
setupStore(app);
app
.component('Pagination', Pagination)
.use(ElementPlus)
.use(i18n)
.use(router)
.mount(container ? container.querySelector('#app') : '#app')
}
const initQianKun = () => {
console.warn('initQianKun')
renderWithQiankun({
mount(props) {
console.warn('mount')
const { container } = props;
render(container);
},
bootstrap() {
console.warn('bootstrap')
},
unmount() {
console.warn('unmount')
app.unmount();
},
update: function (props: QiankunProps): void | Promise<void> {
console.warn('update')
throw new Error('Function not implemented.');
}
})
}
qiankunWindow.__POWERED_BY_QIANKUN__ ? initQianKun() : render()
结合下面两位的文章编写，两位的文章都无法满足自己的需要，所有自己改造了下，作为自己的记录
一些展开
关于 vue route 的两种模式
Vue Router提供了两种模式：hash模式和history模式。
2. hash 模式
1.当超链接的 href 值不是某个页面，而是使用 hash 值时，是不会发生页面跳转的，这点很重要
vue-router 就是利用了这个特点，实现了地址栏的 hash 值发生变化后，切换不同的组件进行渲染
2. history 模式
HTML5 History API 提供了一个 history.pushState 和 history.replaceState 方法（浏览器支持情况不是很乐观），它能让开发人员在不刷新网页的情况下改变站点的 URL
