vite+vue3+ts项目搭建之集成qiankun让其成为子应用模板(vite+vue3+ts+qiankun项目)—新增主应用在线地址可以进入vue2/vue3子应用
2024-04-05 02:00:31
前言
以下操作，是续接之前 第四步 ——即：vite+vue3+ts+pinia+element-plus项目已完成搭建好，可以直接业务开发了
主应用技术栈：vue2+webpack+js
集成qiankun(微前端)
1、安装vite-plugin-qiankun
npm install vite-plugin-qiankun
2、vite.config.ts文件修改，代码如下：
import qiankun from 'vite-plugin-qiankun'
const packName = require('./package').name // 必须要指定当前子应用命名// 配置NG——这个是与后台、运维约定好的，做NG转发；即主应用地址+子应用base就会直接NG转发base: '/vitedemo',plugins: [// 配置qiankunqiankun(`${packName}`, {useDevMode: true}),...]
注意点：
本地启动测试主子应用切换需要在server:{}里面添加headers: {‘Access-Control-Allow-Origin’: ‘*’ }, 解决主应用跳子应用跨域问题
server: {headers: {'Access-Control-Allow-Origin': '*'},host: '0.0.0.0',port,open: true,https: false,...}
2、main.ts文件修改，完整代码如下：
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
// 所有业务api接口
import api from './api'
/*** element-plus*/
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 因element-plus默认是英文，我们指定一下默认中文
import locale from 'element-plus/lib/locale/lang/zh-cn'
// 图标并进行全局注册
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
// pinia代替vuex
import pinia from './store'
// 权限控制(全局路由守卫)
import './permission'
/*** 样式*/
// 公共样式
import '@/assets/styles/index.scss'
// 初始化样式
import 'normalize.css'
// 统一注册 baseComponents
import baseComponentsInstall from '@/components/baseComponents/install'
// svg渲染
import SvgIcon from '@/components/SvgIcon/index.vue'
/*** 配置qiankun*/
import { renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
let instance: any = null
function render(props: any = {}) {const { container } = propsinstance = createApp(App)instance.use(router)instance.use(pinia)// 注册全局api方法instance.config.globalProperties.$api = api// 注册所有图标for (const [key, component] of Object.entries(ElementPlusIconsVue)) {instance.component(key, component)}// 注册ElementPlusinstance.use(ElementPlus, {locale // 语言设置// size: Cookies.get('size') || 'medium' // 尺寸设置})// 自动注册全部本地组件instance.use(baseComponentsInstall)// 全局组件祖册instance.component('SvgIcon',// 如果这个组件选项是通过 `export default` 导出的，那么就会优先使用 `.default`，否则回退到使用模块的根SvgIcon.default || SvgIcon)instance?.mount(container ? container.querySelector('#app') : '#app')console.log('开始加载相关内容')
}
renderWithQiankun({mount(props: any) {render(props)},bootstrap() {console.log('%c', 'color:green;', ' ChildOne bootstrap')},update() {console.log('%c', 'color:green;', ' ChildOne update')},unmount(props: any) {console.log('unmount', props)instance.unmount()instance._container.innerHTML = ''instance = null}
})
if (!qiankunWindow.__POWERED_BY_QIANKUN__) {console.log('并不是qiankun渲染')render()
}
3、router.ts文件修改，完整代码如下：
import { createRouter, createWebHistory } from 'vue-router'
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
import Layout from '@/layout/index.vue'
import login from '@/views/login.vue'
export const constantRoutes: any = qiankunWindow.__POWERED_BY_QIANKUN__? [{path: '/login',name: 'login',component: login,hidden: true,meta: {rootPage: true,noCache: true}},{path: '/redirect',component: Layout,hidden: true,children: [{path: '/redirect/:path(.*)',component: () => import('@/views/redirect.vue')}]},{path: '',component: Layout,redirect: 'index',hidden: true,children: [{path: '/index',component: () => import('@/views/index.vue'),name: 'index',hidden: true,meta: { title: '首页', icon: 'monitor', noCache: true, affix: true }}]}]: [{path: '/redirect',component: Layout,hidden: true,children: [{path: '/redirect/:path(.*)',component: () => import('@/views/redirect.vue')}]},{path: '/login',component: login,hidden: true,meta: {noCache: true}},{path: '/404',component: () => import('@/views/error/404.vue'),hidden: true},{path: '/401',component: () => import('@/views/error/401.vue'),hidden: true},{path: '',component: Layout,redirect: 'index',hidden: true,children: [{path: '/index',component: () => import('@/views/index.vue'),name: 'index',hidden: true,meta: { title: '首页', icon: 'monitor', noCache: true, affix: true }}]}]const router = createRouter({history: createWebHistory(qiankunWindow.__POWERED_BY_QIANKUN__ ? '/' : '/vitedemo/'),routes: constantRoutes,
})
export default router
3、全局路由守卫permission.ts文件修改，完整代码如下：
import router from './router'
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
import { getToken } from '@/utils/cookies'
import { ElMessage } from 'element-plus'
import { qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
import useUserStore from '@/store/modules/user'
import usePermissionStore from '@/store/modules/permission'
NProgress.configure({ showSpinner: false })
const whiteList = ['/login']
router.beforeEach((to: any, from: any, next: Function) => {NProgress.start()if (getToken()) {if (to.path === '/login') {next({ path: '/' })NProgress.done()} else {if (usePermissionStore().sysMenu.length === 0) {// 路由信息是不是组装完useUserStore().GetInfo()usePermissionStore().generateRoutes().then((accessRoutes: any) => {accessRoutes.forEach((rout: any) => {router.addRoute(rout) // 动态添加可访问路由表})next({ ...to, replace: true })}).catch(err => {useUserStore().FedLogOut()ElMessage.error(err.message || err.msg || '出现错误，请稍后再试')next({ path: '/' })})} else {// 进入页面前设置菜单if (!qiankunWindow.__POWERED_BY_QIANKUN__) {// 子应用单独运行，直接进入该系统const add_routes = toRaw(usePermissionStore().sysMenu)if (to.path === '/index') {let lastChild =add_routes[0]?.children?.length > 0? add_routes[0].children[0]: add_routes[0]if (to.path === lastChild.path) return falsenext(lastChild)NProgress.done()} else {console.log('子项目的next')next()}} else {console.log('主应用进入')next()}}}} else {if (whiteList.indexOf(to.path) !== -1) {next()} else {next(`/login`)NProgress.done()}}
})
router.afterEach(() => {NProgress.done()
})4、其他文件修改，如下：
5、到此子应用已经配置完成
主应用跳转到子应用
主应用技术栈: vue2+js+element-ui
1、main.js修改，代码如下：
因为子应用是接口获取的，无需在单个注册
import { registerMicroApps, start } from "qiankun";
// 获取所有子应用
import childrenApp from './children.json'
// console.log('clientType=B', res)
const res = childrenApp
if (res.code == 200) {if (window.__POWERED_BY_QIANKUN__) {__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;}console.log('获取所有子应用', res.data)const apps = res.data.children && res.data.children.map((item) => {return {name: item.packageName,// 微应用package.json的name字段entry: item.entry,// 微应用访问地址，默认加载这个html页面并解析其中的js动态执行container: '#app', // 容器名activeRule: item.activeRule,// 激活路径，微应用路由}})apps && registerMicroApps(apps, {beforeLoad: async (app) => {console.log('before load', app)document.title = 'vue3+vite+ts'},beforeMount: [async (app) => {console.log('before mount', app.name)}]})// 启动 qiankunstart()
} else {Element.Message.warning('加载微应用失败,将无法访问子系统')
}
new Vue({router,store,render: h => h(App)
}).$mount("#app")
2、最终效果
新增主应用在线地址
可以在线切换进入wocwin-vue2（常规vue2+webpack后台管理系统模板）、wocwin-admin（常规vue3+vite+Ts后台管理系统模板）
组件地址
主应用在线地址
gitHub组件地址
gitee码云组件地址
主子应用切换demo源码地址
相关文章
基于ElementUi再次封装基础组件文档
vue3+ts基于Element-plus再次封装基础组件文档
vite+vue3+ts项目搭建之集成qiankun让其成为子应用模板(vite+vue3+ts+qiankun项目)—新增主应用在线地址可以进入vue2/vue3子应用相关推荐
- 初学者idea web项目搭建之路（四） thymeleaf模板引擎
前言 自己摸索了一阵后,在网络上找了一个入门的spring boot视频看了一下,有如醍醐灌顶一般,瞬间就筑基成功突破了,毕竟学习知识还是成体系的好. 模板引擎依赖引入 首先吧抛出两个官网spring ...
- Vue3项目搭建学习笔记
Vue3项目搭建学习笔记 参考王红元老师vue课程 创建项目 vue create vue3-ts-cms 项目搭建规范 集成editorconfig配置 VSCode需要安装一个插件:EditorC ...
- vue+element-ui JYAdmin后台管理系统模板-集成方案【项目搭建篇1】
项目搭建时间:2020-06-29 本章节:讲述基于vue/cli, 项目的基础搭建. 本主题讲述了vue+element-ui JYAdmin 后台管理系统模板-集成方案,从零到一的手写搭建全过程. ...
- 超简单的react和typescript和引入scss项目搭建流程
1.首先我们先创建一个react项目,react官网也有react项目搭建的命令 npx create-react-app my-app cd my-app 2.安装我们项目需要的样式依赖,这个项目我 ...
- angular6 mysql_Angular6项目搭建
安装工具: Nodejs, npm 最新版, https://nodejs.org/en/ Angular CLI, npm install -g @angular/cli Visual ...
- 基于Jenkins快速搭建持续集成环境
看了园友张善友的博文,尝试成功.便有此作.原网址: 基于 Jenkins 快速搭建持续集成环境 天下事有难易乎?为之,则难者亦易矣:不为,则易者亦难矣. 首先要学会使用MSBuild构建脚本 附网址: ...
- react项目搭建，步骤最全，附源码git地址(react+router+typescript+redux+axios+antdesign+mock+eslint)
企业级react项目搭建流程,基于官网推荐脚手架create-react-app搭建的项目基本框架,在该基础上增加项目所需要的功能插件等.代码git地址base分支:https://github.co ...
- 移动物联网项目搭建（一）——起步
移动物联网项目搭建(一) 项目背景意义 项目规划 项目目标(初级) 项目所需硬件设备 项目实现准备 项目传送门 前言 本项目是我本人在2019年7月也就是大二暑假所做的一个云端通信新手训练项目,阿里云 ...
- Vue + Element-ui实现后台管理系统---项目搭建 + ⾸⻚布局实现
目录:导读 项目搭建 + ⾸⻚布局实现 一.项目搭建 1.环境搭建 2.项目初期搭建 二.Main.vue 三.左侧栏部分(CommonAside.vue) 四.header部分(CommonHead ...
最新文章
- LOCALALLOC和GLOBALLOC有什么区别? 全局内存和局部内存有什么区别?(转)
- JAVA常用基础知识点[继承,抽象,接口,静态,枚举,反射,泛型,多线程...]
- JavaString库
- fail-safe fail-fast知多少
- PHP: stdclass, 数组转成对象
- python设计模式23-访问者模式
- ROW_NUMBER
- html 中写注释吗,html怎么注释？
- 以敏捷的方式运作一所大学
- Maven ，命令行中，字符编码 设置
- Canny 算子的非极大值抑制
- 廊坊金彩教育：关键词有什么技巧
- 怎么将多张图片打印在一张A4纸上?
- 不能说的hidden
- dede {dede:channel currentstyle 中使用~seotitle~
- ubuntu 下 ssd磁盘检测
- 做好公司各部门数据报表支撑的几个简单思维
- 去掉input text边框
- OLAP和数据立方体
- 纪委正调查计算机学院院长,网曝湖北文理学院招办领导受贿 学院纪委：正在调查...