东至网站建设,文章网站后台,微信营销的特点,阿里巴巴做网站的工具使用版本
node -- 16vue/cli -- 5
创建文件
创建文件夹qiankun-test。
使用vue脚手架创建主应用main和子应用dev 主应用
安装 qiankun:
yarn add qiankun 或者
npm i qiankun -S
使用qiankun#xff1a; 在 utils 内创建 微应用文件夹 microApp,在该文件夹…工具使用版本
node -- 16vue/cli -- 5
创建文件
创建文件夹qiankun-test。
使用vue脚手架创建主应用main和子应用dev 主应用
安装 qiankun:
yarn add qiankun 或者
npm i qiankun -S
使用qiankun 在 utils 内创建 微应用文件夹 microApp,在该文件夹内创建微应用出口文件 index.js路由文件 microAppRouter,配置函数文件 microAppSetting。 路由文件 microAppRouter // 微应用路由
const microAppRouter [{name: dev, //用于应用名 容器id 应用路由基地址url: //localhost:8080, //应用路径ip与端口props: { propsName: 8080 }, //初始化时需要传递给微应用的数据// hidden: false,//是否启用该应用默认falsemenuName: dev,//自定义属性 根据需要自己配置用在了菜单导航的名称},];export default microAppRouter; 配置函数文件 microAppSetting // 引入路由
import microAppRouter from ./microAppRouter;
// 微应用配置
const microAppSetting {};
export default microAppSetting;
/*** description: 配置子应用* param {*}* return {*}*/
microAppSetting.microApps () {let apps [];microAppRouter.map((item) {if (!item.hidden) {apps.push({name: item.name, //应用名(不可重复)entry: item.url, //默认加载应用路径(ip与端口)container: #${item.name}, //容器idactiveRule: /${item.name}, //激活该应用的路径hash模式#子应用路由基地址...item,});}}); return apps;
}; 微应用出口文件 index.js // 引入 qiankun 应用注册函数 开启函数
import { registerMicroApps, start } from qiankun;
// 引入 微应用配置文件
import microAppSetting from ./microAppSetting;
//注册子应用
registerMicroApps(microAppSetting.microApps());
//开启
start(sandbox: { strictStyleIsolation?: boolean, // 开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 [shadow dom]节点从而确保微应用的样式不会对全局造成影响。experimentalStyleIsolation?: boolean// 设置实验性的样式隔离特性即在子应用下面的样式都会包一个特殊的选择器规则来限定其影响范围
}); 在App.vue内配置微应用容器及跳转菜单 templatediv idfapp!-- 主应用路由出口 --router-link to/mian主应用/router-linkrouter-linkv-for(item,index) in microAppDom_Router:keyindex:to/${item.name}?${item.props?.propsName}{{ item.menuName }}/router-linkrouter-view/router-view/div
/templatescript
// 引入子应用路由
import microAppRouter from /utils/microApp/microAppRouter;
export default {name: App,data() {return {microAppDom_Router: microAppRouter,};}
}
/script 在main.js文件内引入微应用出口文件 index.js
import /utils/microApp/index; 7. 路由文件router.js
const router new VueRouter({mode: history,routes
}) 子应用配置
在src中增加public-path.js文件 //public-path.jsif (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 falselet instance null;
function render(props {}) {const { container } props;// Vue.use(router)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;
}配置Webpack、跨域与端口号 const { defineConfig } require(vue/cli-service)
const { name } require(./package);
module.exports defineConfig({devServer: {headers: {Access-Control-Allow-Origin: *,},},configureWebpack: {output: {library: ${name}-[name],libraryTarget: umd, // 把微应用打包成 umd 库格式//jsonpFunction: webpackJsonp_${name} // webpack5废弃jsonpFunctionchunkLoadingGlobal: webpackJsonp_${name}, },},
}); 路由文件router.js
const router new VueRouter({mode: history,base: /dev,routes,
});
报 ____webpack_public_path__未定义的问题解决 根据创建项目时选择的配置在package.json文件内添加全局配置
module.exports {
---globals: {__webpack_public_path__: writable,},
---
};
报子应用接口404问题解决
主应用vue.config.js配置代理
module.exports defineConfig({
---devServer: {proxy: {/api1: { // 匹配所有以/api1 开头的请求路径target: http://localhost:8080/, // 代理目标的基础路径changeOrigin: true,pathRewrite: {^/api1:}}},
},
---
})
