微前端学习-项目搭建（一）

主应用

1. 安装qiankun

npm i qiankun -S

2. 修改根id

修改public/index.html中的根id，防止和微应用相同

// main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#root')

3. 添加微应用容器

在App.vue或者布局组件中添加一个容器用于显示微应用

<template>
    <div id="root">
        main app
        <div id="subapp-viewport"></div>
    </div>
</template>

4. 注册微应用并启动

在main.js中注册微应用并启动

import router from './router'
import store from './store'
import App from './App.vue'
import Vue from 'vue'
import { registerMicroApps, start } from 'qiankun'

new Vue({
	router,
	store,
	render: h => h(App)
}).$mount('#root')

// 注册微应用
registerMicroApps([
    {
        name: 'microAppVue',
        entry: 'http://localhost:8083/',
        container: '#subapp-viewport',
        activeRule: '/microAppVue'
    },
    {
        name: 'microApp',
        entry: 'http://localhost:8084/',
        container: '#subapp-viewport',
        activeRule: '/microApp'
    },
])
// 启动
start()

微应用

1. 修改package.json名称（建议）

微应用名称统一用package.json里面的name，要和主应用中注册时候用name字段一致

2. 添加public-path.js

在要main.js中引入，并且放在最上面

// src/public-path.js
// 微应用端口
import { PORT } from './qiankui.config' 
;(function () {
    if (window.__POWERED_BY_QIANKUN__) {
        if (process.env.NODE_ENV === 'development') {
                // eslint-disable-next-line no-undef
                __webpack_public_path__ = `//localhost:${PORT}/`
                return
        }
        // eslint-disable-next-line no-undef
        __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
    }
})()

3. 修改webpack配置(vue.config.js)

const { name } = require('./package.json')
import { PORT } from './src/qiankui.config'
module.exports = {
	lintOnSave: false,
	devServer: {
		port: PORT, // 端口要写死，因为主应用中配置子应用列表时用的是写死的端口配置
		disableHostCheck: false, // 关闭主机检查，保证子应用可以被主应用fetch到
		headers: {
			'Access-Control-Allow-Origin': '*' // 配置跨域请求头，解决开发环境跨域问题
		}
	},
	configureWebpack: {
		output: {
			library: name, // 名称要和主应用中配置的子应用列表中的name字段相同
			libraryTarget: 'umd', // 把子应用打包成 umd 库格式
			jsonpFunction: `webpackJsonp_${name}` //  此处后缀也要和名称保持一致
		}
	}
}

4. 修改路由base

微应用的路由base要和主应用中注册时候的activeRule一致

const router = new VueRouter({
  mode: 'history',
  base: 'microAppVue',
  routes
})

5. 导出qiankun生命周期

在微应用入口文件(main.js)中导出qiankun的生命周期

// main.js

import './public-path'
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

let instance = null
// 重新包装render方法
function render(props = {}) {
	const { container } = props
	const renderContainer = container ? container.querySelector('#app') : '#app' // 如果是作为子应用渲染，则渲染到主应用中配置的DOM节点中
	instance = new Vue({
		router,
		store,
		render: h => h(App)
	}).$mount(renderContainer)
}

// 独立运行时直接渲染
if (!window.__POWERED_BY_QIANKUN__) {
	render()
}

export async function bootstrap() {
	console.log('[vue] vue app bootstraped')
}

export async function mount(props) {
	console.log('[vue] props from main framework', props)
	render(props)
}

export async function unmount() {
	instance.$destroy()
	instance.$el.innerHTML = ''
	instance = null
	router = null
}

启动应用（开发环境）

分别进入主应用和微应用，然后启动项目(npm run serve)