micro-app-vue2 vue3 超详细快速入门指南 学习记录
micro-app-vue 快速入门指南
简介
micro-app是京东零售推出的一款微前端框架，它基于类WebComponent进行渲染，从组件化的思维实现微前端，旨在降低上手难度、提升工作效率。它是目前接入微前端成本最低的框架，并且提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。
micro-app与技术栈无关，对前端框架没有限制，任何框架都可以作为基座应用嵌入任何类型的子应用。
快速开始
1. 基座应用
//初始化一个vue应用
vue create main-vue
//安装 @micro-zoe/micro-app 依赖
npm i @micro-zoe/micro-app --save
//
入口添加
// main.js
import Vue from "vue";
import App from "./App.vue";
import routes from "./router";
import VueRouter from "vue-router";
import microApp from "@micro-zoe/micro-app";
Vue.config.productionTip = false;
microApp.start();
const router = new VueRouter({
mode: "history",
// 设置主应用基础路由为main-vue(用于后续部署)，则子应用基础路由(baseroute)为/main-vue/xxx
base: process.env.BASE_URL,
routes,
});
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
分配一个路由给子应用(viewsx新建my-page.vue)
import Vue from "vue";
import VueRouter from "vue-router";
import MyPage from "../views/my-page.vue";
Vue.use(VueRouter);
const routes = [
{
// 非严格匹配，/my-page/* 都指向 MyPage 页面
path: "/my-page/*",
name: "my-page",
component: MyPage,
},
];
export default routes;
页面中嵌入子应用
子应用
到此主应用配置完成
2.子应用
//初始化一个vue应用
vue create child-vue
设置跨域支持（根目录新增vue.config.js）
module.exports = {
devServer: {
port: 3000,
headers: {
"Access-Control-Allow-Origin": "*",
},
},
};
修改路由配置
//router.js
import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";
Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "Home",
component: Home,
},
{
path: "/about",
name: "About",
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () =>
import(/* webpackChunkName: "about" */ "../views/About.vue"),
},
];
export default routes;
设置基础路由
//main.js
import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import routes from "./router";
Vue.config.productionTip = false;
const router = new VueRouter({
mode: "history",
// __MICRO_APP_BASE_ROUTE__ 为micro-app传入的基础路由
base: window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL,
routes,
});
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
设置 publicPath (src新建public-path.js)
//public-path.js
// __MICRO_APP_ENVIRONMENT__和__MICRO_APP_PUBLIC_PATH__是由micro-app注入的全局变量
if (window.__MICRO_APP_ENVIRONMENT__) {
// eslint-disable-next-line
__webpack_public_path__ = window.__MICRO_APP_PUBLIC_PATH__
}
main.js 引入public-path.js
//main.js
import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import routes from "./router";
import "./public-path";
Vue.config.productionTip = false;
const router = new VueRouter({
mode: "history",
// __MICRO_APP_BASE_ROUTE__ 为micro-app传入的基础路由
base: window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL,
routes,
});
new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
监听卸载
// main.js
import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import routes from "./router";
import "./public-path";
Vue.config.productionTip = false;
const router = new VueRouter({
mode: "history",
// __MICRO_APP_BASE_ROUTE__ 为micro-app传入的基础路由
base: window.__MICRO_APP_BASE_ROUTE__ || process.env.BASE_URL,
routes,
});
const app = new Vue({
router,
render: (h) => h(App),
}).$mount("#app");
// 监听卸载操作
window.addEventListener("unmount", function () {
app.$destroy();
});
运行
分别跑起两个应用 浏览器输入http://localhost:8080/my-page/
记得最后一个斜杠一定要写（不要问我为什么知道）
vue.config.js中的port 指定打包路径一定要指定好