为什么要用微前端？如何使用乾坤微前端？

$ yarn add qiankun # 或者 npm i qiankun -S

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import { registerMicroApps, start } from "qiankun"; //++++++++++
 
Vue.config.productionTip = false;//++++++++++
 
new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");
// 在主应用中注册子应用 //++++++++++
registerMicroApps([
  {
    name: "vueApp", //子应用名称-自己设置
    entry: "//localhost:8091", //子应用启动的地址-自己设置
    container: "#container", // 子应用在主应用的容器名称-自己设置
    activeRule: "/app-vue", // 路由地址，后面用push（）或者route.link.to-自己设置
    props: {
      data: "child子应用",
    }, //传参
  },
]);
// 启动
start();

module.exports = {
  devServer: {
    port: 8090, //你自己项目的端口号
    headers: {
      "Access-Control-Allow-Origin": "*", // 允许跨域访问子应用页面 ++++++++++
    },
  },
};
 

"app">
    <span><router-link to="/">点击跳转到父页面router-link>span>
    <span><router-link to="/app-vue">点击跳转到子页面router-link>span>
    <router-view />
    <div id="container">
      
    div>
  

至此，主应用配置完毕

3.2 接下来是配置子项目步骤：

第一步，在src文件夹下新建public-path.js文件，并添加如下代码

if (window.__POWERED_BY_QIANKUN__) {
  __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}
 

这一步，90%概率会遇到webpack_public_path 未定义，这是因为EsLint的检测机制，所以我们需要在package.json中的eslintConfig中进行如下配置

"eslintConfig": {
   	......
    "globals": {
      "__webpack_public_path__": true
    }
  },

第二步，main.js中，在你的子项目：

注意下：这里和官网的配置不一样，这里很容易报错，按照我这个来就行

还有一个注意点：

还有要注意的是我这里修改了#app为#app-vue，原因为#app在主应用中已使用，会冲突，所以对应的index.html与App.vue中也应当修改为#app-vue

import "./public-path"; //+++++++++++++++++++++++
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
 
Vue.config.productionTip = false;//+++++++++++++++++++++++
//+++++++++++++++++++++++
let instance = null;
function render(props = {}) {
  const { container } = props;
  instance = new Vue({
    router,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector("#app-vue") : "#app-vue");
}
 
// 独立运行时
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;
}
 
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app-vue");
 

第三步，配置子应用跨域，，在你的子项目的vue.config.js文件，并添加如下代码

const { name } = require("./package");
module.exports = {
  devServer: {
    port: 8091, //子应用启动端口号，不可随意修改，与上文中父应用注册的子应用端口号对应
    headers: {
      "Access-Control-Allow-Origin": "*", //循序跨域
    },
  },
  configureWebpack: {
    output: {
      library: `${name}-[name]`,
      libraryTarget: "umd", // 把微应用打包成 umd 库格式
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
};
 

第四步，在你的子项目配置路由，打开src/router文件夹下的index.js文件，将以下代码

将：

const router = new VueRouter({
  routes,
});

修改为：

const router = new VueRouter({
  // 这里和主应用中注册子应用时的activeRule对应
  base: window.__POWERED_BY_QIANKUN__ ? "/app-vue" : "/", 
  mode: "history",
  routes,
});

第五步，修改app.vue和index.html中绑定的id，在你的子项目：

到这就完成了，我这里还遇到一个不大不小的问题：

子项目的样式有些错乱，检查后发现子项目的font-size继承了父项目的font-size,而父项目用了rem适配，处理的点是body和html的样式中设置font-size的值，解决了。