免费网站平台推荐,网站全网推广好还是做58精准好,龙岗区建设局网站,建筑设计公司经营范围主项目使用history#xff0c;子项目使用hash模式 1. 下载安装qiankun: ^2.10.132. 手动调用qiankun,使用vue脚手架搭建的项目1. 主项目配置#xff08;我使用的是手动调用乾坤#xff0c;在指定页面显示内容#xff09;1. 要使用的页面中引入乾坤… 主项目使用history子项目使用hash模式 1. 下载安装qiankun: ^2.10.132. 手动调用qiankun,使用vue脚手架搭建的项目1. 主项目配置我使用的是手动调用乾坤在指定页面显示内容1. 要使用的页面中引入乾坤2. router设置 2. 子项目配置我用的hash模式1. 在src目录下新建public-path.js文件1. main.js 配置2. vue.config.js 配置 3. 运行后使用 3. 手动调用qiankun,子项目是存在的旧项目修改1. main.js 配置修改添加一下2. router.js 配置修改添加一下3. 添加vue.config.js 配置4. 运行后使用 4 报错1.报错一static/fonts/element-icons.535877f.woff:1 GET http://localhost:8080/static/fonts/element-icons.535877f.woff net::ERR_ABORTED 404 (Not Found) 该项目未上线使用因此不知道打包后会不会有问题 1. 下载安装qiankun: “^2.10.13”
参考官网地址
2. 手动调用qiankun,使用vue脚手架搭建的项目
1. 主项目配置我使用的是手动调用乾坤在指定页面显示内容
1. 要使用的页面中引入乾坤
templatediv classxinp 个人项目/pkeep-alivediv idbaixianHome/div/keep-alive!--xinHome 为放置子项目的盒子 --/div
/templatescript
import { loadMicroApp, start } from qiankun;//引入手动调用方法export default {name: XinVue2,data() {return {}},created() {this.$nextTick(() {// hash模式下配置const getActiveRule (hash) (location) location.hash.startsWith(hash);this.vueApp loadMicroApp({name: qiankun-children,entry: //localhost:8081/,container: #xinHome,activeRule: getActiveRule(#/),});//启动乾坤函数start({ singular: false });})},beforeDestroy(){console.log( this.vueApp.unmount({ name: qiankun-children }))this.vueApp.unmount({ name: qiankun-children });},methods: {}
}2. router设置
router/index.js文件配置
import Vue from vue
import VueRouter from vue-router;
Vue.use(VueRouter)const router new VueRouter({base: window.__POWERED_BY_QIANKUN__ ? /qiankun-children/ : /, //使用 history模式必须配置mode: history,routes: [{path: /xin,name: xin,component: () import(/views/xin-vue2/home),}, {path: /mq,name: mq,component: () import(/views/mq-vue2/home),}],
});
export default routermain.js配置 引入并使用VueRouter
import VueRouter from vue-router;
import router from ./router/index
Vue.config.productionTip false
Vue.use(VueRouter)
new Vue({router,render: h h(App),
}).$mount(#appAdmin)
文件目录结构
2. 子项目配置我用的hash模式
1. 在src目录下新建public-path.js文件
__webpack_public_path__ window.__POWERED_BY_QIANKUN__? window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__: http://localhost:8081/; // 填写你当前子项目的实际部署地址1. main.js 配置 import ./public-path;//要放最上边
import Vue from vue;
import VueRouter from vue-router;
import ElementUI from element-ui;
import element-ui/lib/theme-chalk/index.css;
import App from ./App.vue;
import store from ./store;
import Home from ./views/home/index.vueVue.config.productionTip false;
Vue.use(ElementUI);
Vue.use(VueRouter)
let router null;
let instance null;
function render(props {}) {const { container } props;router new VueRouter({scrollBehavior: () ({ y: 0 }),routes:[{path: /home,name: Home,component: Home}],});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] 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;
}2. vue.config.js 配置
const { defineConfig } require(vue/cli-service)
const packageName require(./package.json).name;
module.exports defineConfig({transpileDependencies: true,devServer: {headers: {Access-Control-Allow-Origin: *,},},configureWebpack: {output: {library: ${packageName}-[name],libraryTarget: umd,chunkLoadingGlobal: webpackJsonp_${packageName},publicPath: /},},
})
3. 运行后使用 先运行主项目在运行子项目 首页效果 进入调用乾坤页面 地址http://localhost:8081/xin#/ 使用子项目路由进入子项目home页面 地址http://localhost:8081/xin#/home
3. 手动调用qiankun,子项目是存在的旧项目修改
1. main.js 配置修改添加一下
let router null;
let instance null;
function render(props {}) {const { container } props;router homeRoutesinstance new Vue({router,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;router null;
}
// 微应用中增加 update 钩子以便主应用手动更新微应用
export async function update(props) {render(props);
}2. router.js 配置修改添加一下 3. 添加vue.config.js 配置 4. 运行后使用 4 报错
1.报错一static/fonts/element-icons.535877f.woff:1 GET http://localhost:8080/static/fonts/element-icons.535877f.woff net::ERR_ABORTED 404 (Not Found)
static/fonts/element-icons.732389d.ttf:1 GET http://localhost:8080/static/fonts/element-icons.732389d.ttf net::ERR_ABORTED 404 (Not Found) 官网地址跳转 默认情况下沙箱可以确保单实例场景子应用之间的样式隔离但是无法确保主应用跟子应用、或者多实例场景的子应用样式隔离。当配置为 { strictStyleIsolation: true } 时表示开启严格的样式隔离模式。这种模式下 qiankun 会为每个微应用的容器包裹上一个 shadow dom 节点从而确保微应用的样式不会对全局造成影响。 该项目未上线使用因此不知道打包后会不会有问题
