qiankun-vue
<p><strong><strong>主应用：</strong></strong>
安装qiankun：</p>
<pre><code>yarn add qiankun # 或者 npm i qiankun -S</code></pre>
<p>html 插入容器元素:</p>
<pre><code> <nav>
<router-link to="/">Home</router-link> |
<router-link to="/vue">vue</router-link>|
<router-link to="/vue2">vue2</router-link>|
<router-link to="/react">react</router-link>
</nav>
<div id="container"></div></code></pre>
<p>新建.env文件 <code>.env.dev</code>、<code>.env.prod</code>等，设置<code>BASEURL</code>,子应用打包后放入<code>/micro/</code>目录下:</p>
<pre><code>NODE_ENV = "development"
VUE_APP_APP1_BASEURL = "//localhost:2000"
VUE_APP_APP2_BASEURL = "//localhost:2001"</code></pre>
<pre><code>NODE_ENV = "production"
VUE_APP_APP1_BASEURL = /micro/vue-app1/
VUE_APP_APP2_BASEURL = /micro/vue-app2/</code></pre>
<p>新增registerApps.js:</p>
<pre><code>import { registerMicroApps, start } from 'qiankun'
const loader = (loading)=>{
console.log("loading:",loading)
}
registerMicroApps([
{
name: 'vue-app',
entry: process.env.VUE_APP_APP1_BASEURL,
container: '#container',
activeRule: '/vue',
loader,
props: {
name: 'hellllo'
}
},
{
name: 'vue-app2',
entry: process.env.VUE_APP_APP2_BASEURL,
container: '#container',
activeRule: '/vue2',
loader,
props: {
name: 'hellllo2'
}
},
{
name: 'react-app',
entry: '//localhost:30000',
container: '#container',
activeRule: '/react',
loader,
props: {
name: 'helllloreact'
}
}
], {
beforeLoad: app => {
console.log('beforeLoad:', app)
},
beforeMount: [
app => {
console.log('beforeMount:', app)
}
]
})
start();</code></pre>
<p>main.js导入:</p>
<pre><code>import './registerApps'</code></pre>
<p>vue.config.js设置publicPath防止打包后白屏：</p>
<pre><code>const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
publicPath:'/',
lintOnSave: false
})</code></pre>
<p><strong>子应用：</strong>
vue-cli：</p>
<p>新建.env文件 <code>.env.dev</code>、<code>.env.prod</code>等，设置<code>BASEURL</code>,子应用打包后放入<code>/micro/</code>目录下:</p>
<pre><code>NODE_ENV = "development"
VUE_APP_BASEURL = //localhost:2000</code></pre>
<pre><code>NODE_ENV = "production"
VUE_APP_BASEURL = /micro/vue-app/</code></pre>
<p>新建 <code>public-path.js</code>:</p>
<pre><code>if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}</code></pre>
<p>main.js导入<code>public-path.js</code>,暴露生命周期方法：</p>
<pre><code>import './public-path';
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
let router = null;
let instance = null;
function render(props = {}) {
const { container } = props;
// router = new VueRouter({
// base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/',
// mode: 'history',
// routes,
// });
instance = new Vue({
// router,
// store,
render: (h) => h(App),
}).$mount(container ? container.querySelector('#app') : '#app');
}
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
export async function bootstrap(){
console.log('vue app bootstraped')
}
export async function mount(props){
console.log('vue app mount')
render(props);
}
export async function unmount(){
console.log('vue app unmount')
instance.$destroy();
instance.$el.innerHTML = '';
instance = null;
router = null;
}</code></pre>
<p>vue.config.js配置开发环境跨域、打包格式等:</p>
<pre><code>const { defineConfig } = require('@vue/cli-service')
const { name } = require('./package');
console.log(process.env.VUE_APP_BASEURL)
module.exports = defineConfig({
transpileDependencies: true,
lintOnSave: false,
// publicPath: '//localhost:2001',
publicPath: process.env.VUE_APP_BASEURL,
devServer: {
port: 2001,
headers:{
"Access-Control-Allow-Origin":"*"
}
},
configureWebpack: {
output: {
library: `${name}-[name]`,
libraryTarget: 'umd', // 把微应用打包成 umd 库格式
// jsonpFunction: `webpackJsonp_${name}`,
},
}
})
</code></pre>
<p><strong>部署：</strong>
同ip：</p>
<pre><code>└── html/ # 根文件夹
|
├── micro/ # 存放所有微应用的文件夹
| ├── vue-app1/ # 存放微应用 vue-hash 的文件夹
| ├── vue-app2/ # 存放微应用 vue-history 的文件夹
├── index.html # 主应用的index.html
├── css/ # 主应用的css文件夹
├── js/ # 主应用的js文件夹</code></pre>