乾坤微前端

用户1471527235408
408 阅读2分钟

主应用

1. 安装 qiankun

npm i qiankun -S

2. 在主应用中注册微应用

  1. main.js
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
	{
		name: 'vue_base',			// 子应用名称
		entry: '//10.34.80.162:8083',	// 子应用入口
		container: '#container',	// 子应用所在容器
		activeRule: '/vue',		// 子应用触发规则（路径）
		// props:{ actions, msg:'w'}//
	},
	{
		name: 'purehtml',
		entry: 'http://10.34.80.162:8080',
		container: '#container',	// 子应用所在容器
		activeRule: '/purehtml'
	}
]);
// 启动默认应用
// setDefaultMountApp('/purehtml')
// 开启服务,配置项见官方文档
start()
  1. App.vue
<div id="mainApp">
    <a href="/vue/deviceMessage">vue</a>
    <br>
    <!-- 子应用 vue app -->
    <a href="/purehtml">bigScreen</a>
    <!-- 主应用容器 -->
    <!-- <router-view/> -->
    <!-- 子应用容器 -->
    <div id="container"></div>
  </div>

3. Vue 微应用

  1. 修改vue.config.js，主要是设置端口号、设置允许跨域（主应用跨域访问微应用）、设置打包模式（一定要设置）
dev: {
		// Paths
		assetsSubDirectory: 'static',
		assetsPublicPath: '/',
		proxyTable: {
			'/api': {
				target: 'http://10.35.43.10/',
				changeOrigin: true,
				pathRewrite: {
					'^/api': ''
				}
			}
		},
		// Various Dev Server settings
		host: '10.34.80.162', // can be overwritten by process.env.HOST
		port: 8082,
    }
  1. webpack.dev.conf.js
 devServer: {
     headers: {
	    'Access-Control-Allow-Origin': '*',
	  }
    }

3.configureWebpack: 是基于vue3.0版本进行适配，不适用于vue2.x

configureWebpack: {
        output: {
            library: 'vue_base_A',(vue_base_A:未package.json中name)
            libraryTarget: 'umd',
            jsonpFunction:  `webpackJsonp_vue_base_A`,(vue_base_A:未package.json中name)
        },
    },
  1. webpack.base.conf.js
output: {
              library: 'vue_base_A',  (vue_base_A:未package.json中name)
              libraryTarget: 'umd',
              jsonpFunction:  `webpackJsonp_vue_base_A`,  (vue_base_A:为package.json中name)
       },
  1. webpack.prod.conf.js
      output: {
              library: 'vue_base_A', (vue_base_A:未package.json中name)
              libraryTarget: 'umd',
              jsonpFunction:  `webpackJsonp_vue_base_A` , (vue_base_A:为package.json中name)
       },
  1. main.js
let instance = null 
// 1. 将注册方法用函数包裹，供后续主应用与独立运行调用
function render(props = {}) {
  const { container } = props
  instance = new Vue({
    router,
    store,
    render: h => h(App),
  }).$mount(container ? container.querySelector('#app') : '#app')
}


if (window.__POWERED_BY_QIANKUN__) { // 动态添加publicPath
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
if (!window.__POWERED_BY_QIANKUN__) { // 默认独立运行
  render();
}

// 父应用加载子应用，子应用必须暴露三个接口：bootstrap、mount、unmount
// 子组件的协议就ok了
export async function bootstrap(props) {
  console.log('one bootstrap')
  console.log(props)
}
export async function mount(props) {
  props.onGlobalStateChange((state,prev)=>{
    console.log(state)
  })
  render(props)
}
export async function unmount(props) {
  instance.$destroy();
}

export async function update(props) {
  console.log('update props', props)
}
  1. router/index.js
let router = new Router({
  mode: window.__POWERED_BY_QIANKUN__ ? 'history': 'hash',
  base: window.__POWERED_BY_QIANKUN__ ? '/vue' : '/',(/vue 与主应用activeRule对应)
  routes: [
    {
      path: '/',
      name: '首页',
      component: HelloWorld
    },
  ]
})
export default router

4. 非 webpack 构建的微应用

  1. entry.js
const render = $ => {
  $('#purehtml-container').html('Hello, render with jQuery');
  return Promise.resolve();
};

(global => {
  global['purehtml'] = {
    bootstrap: () => {
      console.log('purehtml bootstrap');
      return Promise.resolve();
    },
    mount: () => {
      console.log('purehtml mount');
      return Promise.resolve();
    },
    unmount: () => {
      console.log('purehtml unmount');
      return Promise.resolve();
    },
  };
})(window);
  1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Purehtml Example</title>
</head>
<body>
  <div style="display: flex; justify-content: center; align-items: center; height: 200px;">
    Purehtml Example
  </div>
  <div id="purehtml-container" style="text-align:center"></div>
  <script src="http://10.34.80.162:8080/entry.js" entry></script>
  <!-- <script src="//cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> -->
</body>
</html>
  1. package.json
{
    "name": "purehtml",
    "version": "1.0.0",
    "description": "",
    "main": "index.html",
    "scripts": {
        "start": "cross-env PORT=8080 http-server . --cors",
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "MIT",
    "devDependencies": {
        "cross-env": "^7.0.2",
        "http-server": "^0.12.1"
    }
}

5. 非 webpack 构建的微应用服务启动

采用http-server本地运行前端项目

  1. 安装
npm install -g http-server
  1. 参数说明
-p 端口号 (默认 8080)
--cors 启用 CORS via the Access-Control-Allow-Origin header
  1. 启动
D:\dom\purehtml>http-server --cors -p 8080
avatar
文章
阅读
粉丝