乾坤实战采坑之旅（主应用的某个路由页面加载微应用）

原创

已于 2024-02-21 13:45:30 修改 · 2.7k 阅读

标签

#前端

于 2022-12-19 10:50:15 首次发布

本文详细介绍了使用qiankun实现Vue3微应用的集成，包括子应用与主应用的交互、public-path.js的处理、路由配置、子路由创建、图片路径问题、Nginx代理配置等。同时，还涉及到Vite的接入、 Pinia状态管理、Vue Router的使用以及路由守卫的实现，以及解决样式冲突的方法。

1.子应用不需要安装乾坤
2.主应用不需要public-path.js
3.start方法应该写在对应的子路由页面 id也应该对应写在挂在页面

if (!window.qiankunStarted) {
   
   
      window.qiankunStarted = true;
      start();
    }
    <div id="appContainer" />

此处最重要的一个关键点事需要再路由页面增加
在这里插入图片描述
必须写在下面我写在上面无效
4.写与子路由对应的两层路径

5.子路由的创建必须写在render里我刚开始为了方便写在路由页面并且路由必须置空失活的时候否则导致回不去主应用

6.图片路径的问题

增加publiePath 我当时增加了但是一直不生效最后发现代码里写的css url 没有~因为是less不加这个这个loader不编译这个坑我半天
7.nginx配置问题
在这里插入图片描述

我原本想直接代理到字应用但是想到不想影响子应用就自己新增加一个路径此处有个问题就是我们的js和html没在一个目录所以代理到了 html代理不到js两个互斥后来才发现 index可以指定路径还有就是alias与root的区别就是一个呆代理路径的路径一个不带

上面理解有误并不是 index后面的找到了html界面而是根据匹配原则它又去匹配 /后面的内容找到了html 目前可知 nginx里 / 是优先级最低的匹配项

同样的问题另外一种解决方案

    location  /nginxui/ {
   
   
        root   /html/;    
        #try_files $uri $uri/ /index.html;
        #index  index.html index.htm;
	   try_files $uri $uri/index.html /500.html; 
#	   index index_prod.html; # 不需要, tryfiles 已经指定 }

    }

http://47.93.212.24:8183/nginxui/assets/index-373f168f.js
root 的目录有/则表示根目录下面没有则表示ngxin的安装目录，try-files $uri表示我此次请求的路径加上我的root路径
css/js 可以理解为/html//nginxui/assets/index-373f168f.js 而index.html 因为是请求路径只有nginxui所以完整路径就是
/html/nginxui/index.html

处理静态页面集成qiankun
在这里插入图片描述

vue3 vite接入
1.增加插件
在这里插入图片描述
2.public-path

3.main.ts

import {
   
   createApp} from 'vue'
import {
   
   createPinia} from 'pinia'
import gettext from './gettext'
import './public-path'
import App from './App.vue'
import {
   
   router} from './routes'
import routerEach from './routes/routerEach';
//import 'ant-design-vue/dist/antd.less'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
import {
   
   useSettingsStore} from '@/pinia'
import {
   
    renderWithQiankun, qiankunWindow } from 'vite-plugin-qiankun/dist/helper'
debugger
let app:any = null
let _router = null
// 独立运行时
if(!qiankunWindow.__POWERED_BY_QIANKUN__) {
   
   

    const pinia = createPinia()

    app = createApp(App)

    pinia.use(piniaPluginPersistedstate)
    app.use(pinia)
    app.use(gettext)
    // after pinia created
    const settings = useSettingsStore()
    gettext.current = settings.language || 'en'
    _router = router('');
    routerEach(_router);
    app.use(_router).mount('#app')

} else {
   
   
  // 作为微应用运行
  renderWithQiankun({
   
    // 调用renderWithQiankun
    mount(props) {
   
   
      app = createApp(App)
      const pinia = createPinia()
      pinia.use(piniaPluginPersistedstate)
      app.use(pinia)
      app.use(gettext)
      app.config.globalProperties.__POWERED_BY_QIANKUN__ = qiankunWindow