前言

　　qiankun框架实现效果类似于我们之前所使用的iframe，之所以现在放弃使用iframe是因为有url不同步，刷新页面iframe url状态丢失，后退前进按钮无法使用等等的问题，因此我们选择了更方便实用的qiankun。

用法：

　　创建主基站

　　1. 自己创建一个文件夹，里面写index.html，index.js，package.json，webpack.config.js 这四个文件，如果想的或可以再加上index.css或index.less

　　2. package.json 下面的代码直接粘贴上去

{
  "name": "main",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Rechard",
  "devDependencies": {
    "@babel/core": "^7.20.12",
    "@babel/plugin-transform-react-jsx": "^7.20.7",
    "@babel/preset-env": "^7.20.2",
    "babel-loader": "^9.1.2",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.3",
    "html-webpack-plugin": "^5.5.0",
    "less": "^4.1.3",
    "less-loader": "^11.1.0",
    "style-loader": "^3.3.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "vue": "^2.6.11",
    "zone.js": "^0.12.0"
  }
}

　　3. webpack.config.js 下面的代码直接粘贴上去，配置不喜欢的可以自己改哈

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './index.js',
  devtool: 'source-map',
  devServer: {
    open: true,
    port: '10086',
    // clientLogLevel: 'none',//关闭日志
    historyApiFallback: true,
    allowedHosts: "all",
    compress: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    client: {
      overlay: { warnings: false, errors: true }
    }
  },
  output: {
    publicPath: '/',
  },
  mode: 'development',
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: ['@babel/plugin-transform-react-jsx'],
          },
        },
      },
      {
        test: /\.(le|c)ss$/,
        use: ['style-loader', 'css-loader', 'less-loader'],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: 'index.html',
      template: './index.html',
      minify: {
        removeComments: true,
        collapseWhitespace: true,
      }
    })
  ]
};

　　4. npm install ，建议cnpm install 或 yarn ，速度快些

　　5. index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>主文件</title>
  <style>
    a {
      margin: 10px;
    }
  </style>
</head>
<body>
  <ul>
    <li><a href="/vue">vue</a></li>
    <li><a href="/react">react</a></li>
    <li><a href="/angular">angular</a></li>
  </ul>
  <main id="container"></main>
</body>
</html>

　　6. index.js

import { registerMicroApps, start } from 'qiankun';

registerMicroApps([
  {
    name: 'reactApp',//应用名
    entry: '//localhost:7100',//微应用的地址，改为线上项目地址，但线上项目地址要先需要允许跨域访问
    container: '#container',//挂载的dom节点，会渲染在html的<main id="container">上
    activeRule: '/react',//访问路径，像这个项目就是 http://localhost:10086/vue/home 就可以访问到localhost:7100 项目的内容，下面的几个微项目同理
  },
  {
    name: 'vueApp',
    entry: '//localhost:7101',
    container: '#container',
    activeRule: '/vue',
  },
  {
    name: 'angularApp',
    entry: '//localhost:7102',
    container: '#container',
    activeRule: '/angular',
  },
]);
// 启动 qiankun
start();

　　7. npm run start 启动项目（启动项目前需要先启动微应用，微应用往往是已经上线的项目，比如腾讯书城、腾讯新闻、腾讯官网等等，但是这些每个都需要单独登录，但通过主应用可以实现单点登录的效果，而且微应用无需下载相关依赖，只需要配置生命周期即可）；

　　效果图

　　通过上述操作就可以建立基站（也就是主项目），然后放服务器访问即可，qiankun最大的好处就是无需影响原先的子项目，不需要单独放一块，技术栈互不影响，哪怕vue，react，angular，jquery或者之前的jsp等等都能完美兼容，而且qiankun提供了相关的api微应用之间可以进行数据交互，例如其中一个微应用做了登录操作，存储其Token，那么其他微应用拿到了Token就不需要跳转登录页即可正常访问，来实现单点登录的效果。

　　配置微应用的方法在官网介绍的非常详细，大家根据不同的框架然后对应的修改自己项目的配置，再增加三个qiankun框架的生命周期即可，都是傻瓜式操作，很简单。

　　微应用项目的动态配置地址：https://qiankun.umijs.org/zh/guide/tutorial

　　另外我写了简单的qiankun 项目，供大家参考：https://github.com/zengxudong-bit/qiankun-demo

posted on 2023-01-17 18:49 Tom最好的朋友是Jerry 阅读(1124) 评论(0) 收藏举报

刷新页面返回顶部