微前端实战-乾坤
Posted yw00yw
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微前端实战-乾坤相关的知识,希望对你有一定的参考价值。
主应用
安装qiankun
yarn add qiankun # 或者 npm i qiankun -S
main.js
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
Vue.config.productionTip = false;
import { registerMicroApps, start } from 'qiankun';
registerMicroApps([
{
name: "vueApp",
entry: "//localhost:30001",
container: "#vue",
activeRule: "/vue",
props: {
params: 111
}
},
]);
start({
prefetch: false
});
new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");
需要注意的事项
-
路由hash模式改成history
const router = new VueRouter({ mode: 'history', routes, });
-
app.vue中的id需要删除或者更改,不能是app
<!-- 这里id不能使用默认app,子程序会直接挂在这个节点上,会直接调整到子程序 --> <div id="appmain"> <div id="nav"> <!-- 基座中自己的路由 --> <router-link to="/">主应用</router-link> | <!-- 引入其他子应用路由 --> <router-link to="/vue">子应用</router-link> </div> <router-view /> <div id="vue"></div> </div>
子应用
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
Vue.config.productionTip = false
let instance = null;
function render() {
instance = new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
}
if (window.__POWERED_BY_QIANKUN__) {
__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
render();
}
export async function bootstrap() {}
export async function mount(props) {
console.log(props);
render(props);
}
export async function unmount() {
instance.$destroy();
}
路由改成history
const router = new VueRouter({
mode: 'history',
base: '/vue',
routes
})
vue.config.js
module.exports = {
devServer: {
port: 30001,
headers: {
'Access-Control-Allow-Origin': '*',
},
},
configureWebpack: {
output: {
library: `vueApp`,
libraryTarget: 'umd', // 把微应用打包成 umd 库格式
},
},
}
以上是关于微前端实战-乾坤的主要内容,如果未能解决你的问题,请参考以下文章