标签：实战 vue 前端 Vue router import 乾坤 App store

主应用

安装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");

需要注意的事项

1. 路由hash模式改成history

   const router = new VueRouter({
     mode: 'history',
     routes,
   });
   

2. 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 库格式
    },
  },
}

标签：实战,vue,前端,Vue,router,import,乾坤,App,store
来源： https://blog.csdn.net/yw00yw/article/details/118898861

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。