前言
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
标签：index,react,--,傻瓜式,loader,qiankun,webpack,js From： https://www.cnblogs.com/zxd66666/p/17058526.html