微前端开发(一), 基于 single-spa/qiankun 技术方案的部署

[TOC]

# 基础配置

https://qiankun.umijs.org/zh/cookbook

## 基座:

1. vue-base-app:

`npm i qiankun --save`

```js
// main.js
// ...
import { registerMicroApps, start } from 'qiankun'
const app = [
    {
        name: 'vueApp',
        entry: '//localhost:10000', //默认记载这个 HTML, 解析里面的 js 动态的执行(子应用必须支持跨域)
        container: '#vue', // 基座上的挂载点
        activeRule: '/vue', // 基座访问该路径时,加载子应用
        props: { a: 1 } // 父子应用通信
    },
    {
        name: 'reactApp',
        entry: '//localhost:20000', //默认记载这个 HTML, 解析里面的 js 动态的执行(子应用必须支持跨域)
        container: '#react', // 基座上的挂载点
        activeRule: '/react' // 基座访问该路径时,加载子应用
    }
]

registerMicroApps(app, {
    // 可选项, 基座生命周期
}) // 注册应用
start({
    // prefetch: false // 取消预加载
}) // 开启
// ...
```

## vue-app

main.js

```js
import Vue from 'vue'
import App from './App.vue'
import router from './router'

// ...
let instance = null
function render(props) {
    instance = new Vue({
        router,
        render: h => h(App)
    }).$mount('#app')
}

if(!window.__POWERED_BY_QIANKUN__) {
    __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
    render()
}

// 子组件的协议
export async function bootstrap(props) {}
export async function mount(props) {
    render(props)
}
export async function unmount(props) {
    instance.$destroy()
}

// ...
```

vue.config.js

```js
// ...
module.exports = {
    devServer: {
        port: 10000,
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
    },
    configureWebpack: {
        output: {
            library: 'vueApp',
            libraryTarget: 'umd'
        }
    }
}
```

## react-app

配置变线, 相当于把 webpack 的配置改成 react 的配置

`yarn add react-rewired --save`

1.修改 react 的 package.json

```json
// ...
/*
script: {
    start: 'react-script start',
    build: 'react-script build',
    test: 'react-script test',
    eject: 'react-script eject'
}
*/
// ...
// 改为
script: {
    start: 'react-app-rewired start',
    build: 'react-app-rewired build',
    test: 'react-app-rewired test',
    eject: 'react-app-rewired eject'
}
```

2. 配置文件重写

添加文件 config-overwride.js

```js
// ...
module.exports = {
    webpack: (config) => {
    	config.output.library = 'reactApp'
    	config.output.libraryTarget = 'umd'
        config.output.publicPath = 'http://localhost:20000/',
        return config
    },
    devServer: (configFunction) => {     
        return function (proxy, allowedHost) {
            const confiig = configFunction(proxy, allowedHost)
            config.headers = {
                'Access-Control-Allow-Origin': '*'
            }
            
            return config
        }
    }
}
```

3. index.js

```js
import React from 'react'
import ReactDOM from 'react-dom'
import './index.css'
import App from './App'

function render() {
   ReactDOM.render(
    <React.StrictMode>
        <APP />
       </React.StrictMode>
   )
}

if(!window.__POWERED_BY_QIANKUN__) {
   __webpack_public_path__ = 
       window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
   render()
}

//...
// 子组件的协议
export async function bootstrap(props) {}
export async function mount(props) {
   render(props)
}
export async function unmount(props) {
   ReactDOM.unmountComponentAtNode( document.getElementById('root') )
}
```

# 服务器部署

## Apach

子应用 hash 路由方式配置

```html
# ...
Listen 10002

<VirtualHost 127.0.0.1:10002>
    ## 配置根路径
	DocumentRoot  D:\vueweb
    ## 配置跨域
    Header set Access-Control-Allow-Origin "*"
</VirtualHost>
# ...
```
## Nginx

子应用配置:

```nginx
server {
  listen       8080;
  server_name  localhost;

location / {
    proxy_pass http://www.b.com/app1/;
    proxy_set_header Host $host:$server_port;
    root   html;
    index  index.html index.htm;
    # try_files $uri $uri/ /index.html; # history 路由模式下使用
  }

location /child/vue-history {
    proxy_pass http://www.b.com/app1/;
    proxy_set_header Host $host:$server_port;
    root   html;
    index  index.html index.htm;
    # try_files $uri $uri/ /child/vue-history/index.html; # history 路由模式下使用
  }
  # angular 和 react 的history 配置同上
}
```