首先贴上官网:qiankun.umijs.org/zh;
本次初体验是采用Vue2的框架,微前端是可以将多个前端应用整合到一个spa的页面中,不需要像以往一样一个项目只存在一份代码,随着项目逐渐完善,代码量不断增加,难以维护,微前端的出现就是可以将项目中的页面独立分离出来,做成单独的项目,可以使用不同的技术栈、UI组件。
首先:安装两个脚手架,其中一个为主应用,一个为子应用。分别npm i qiankun -S 或者 yarn add qiankun -S;下载安装乾坤。
主应用的main.js
import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
import { registerMicroApps, start } from 'qiankun'
let apps = [
{
name: 'main',
entry: '//localhost:8083',
container: '#app',
activeRule: '/main',
}
]
registerMicroApps(apps);
start();
new Vue({
render: h => h(App),
}).$mount('#app')
代码中app数组是声明子应用的路由名称,入口规则。
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
headers: {
'Access-Control-Allow-Origin': '*'
}
}
})
子应用中:首先在src目录下创建public-path.js文件
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
引入main.js中,并且配置
import Vue from 'vue'
import App from './App.vue'
import './public-path';
Vue.config.productionTip = false
let instance = null;
function render(props = {}) {
const { container } = props;
instance = new Vue({
render: (h) => h(App),
}).$mount(container ? container.querySelector('#app') : '#app');
}
// 独立运行时
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;
}
如果项目中有eslint检测的话,需要在package.json中配置:
"eslintConfig": {
...
"globals": {
"__webpack_public_path__": true
}
},
然后再配置打包 vue.config.js
const { defineConfig } = require('@vue/cli-service')
const { name } = require('./package');
module.exports = defineConfig({
transpileDependencies: true,
devServer: {
headers: {
'Access-Control-Allow-Origin': '*'
},
port: 8083
},
configureWebpack: {
mode: 'development',
output: {
library: `${name}-[name]`,
libraryTarget: 'umd', // 把微应用打包成 umd 库格式
},
}
})
最后我们看看效果
可以看出两个独立的项目已经整合到一个项目里去,这样维护起来就很方便很多。
本网站是一个以CSS、JavaScript、Vue、HTML为核心的前端开发技术网站。我们致力于为广大前端开发者提供专业、全面、实用的前端开发知识和技术支持。 在本网站中,您可以学习到最新的前端开发技术,了解前端开发的最新趋势和最佳实践。我们提供丰富的教程和案例,让您可以快速掌握前端开发的核心技术和流程。 本网站还提供一系列实用的工具和插件,帮助您更加高效地进行前端开发工作。我们提供的工具和插件都经过精心设计和优化,可以帮助您节省时间和精力,提升开发效率。 除此之外,本网站还拥有一个活跃的社区,您可以在社区中与其他前端开发者交流技术、分享经验、解决问题。我们相信,社区的力量可以帮助您更好地成长和进步。 在本网站中,您可以找到您需要的一切前端开发资源,让您成为一名更加优秀的前端开发者。欢迎您加入我们的大家庭,一起探索前端开发的无限可能!